如何转到页面上的特定元素？ [复制]

Posted 2023-03-10

【中文标题】如何转到页面上的特定元素？ [复制]

【英文标题】：How to go to a specific element on page? [duplicate]

【发布时间】：2011-06-15 15:47:28

【问题描述】：

在我的 html 页面上，我希望能够“转到”/“滚动到”/“关注”页面上的某个元素。

通常，我会使用带有href="#something" 的锚标记，但我已经使用 hashchange 事件和BBQ plugin 来加载此页面。

那么有没有其他方法可以通过 javascript 让页面转到页面上的给定元素？

这是我正在尝试做的基本大纲：

function focusOnElement(element_id) 
     $('#div_' + element_id).goTo(); // need to 'go to' this element


<div id="div_element1">
   yadda yadda 
</div>
<div id="div_element2">
   blah blah
</div>

<span onclick="focusOnElement('element1');">Click here to go to element 1</span>
<span onclick="focusOnElement('element2');">Click here to go to element 2</span>

【问题讨论】：

我诚实的建议是放弃 BBQ 插件。多么糟糕的想法，破坏了一个愚蠢的存储机制的预期默认行为。

我们将 BBQ 插件用于幻灯片，这是该页面的核心功能。该插件允许我们通过 Ajax 获取下一个项目，而无需重新发布页面的其余部分。在这种情况下，BBQ 插件就显得至关重要了。

如果您仍在使用 ***，可能值得将答案更新为更流行的原生答案。

【参考方案1】：

如果该元素当前在页面上不可见，可以使用原生的scrollIntoView() 方法。

$('#div_' + element_id)[0].scrollIntoView( true );

其中true 表示与页面顶部对齐，false 表示与底部对齐。

否则，您可以使用 jQuery 的 a scrollTo() plugin。

或者也许只是获取元素的topposition()^(docs)，并将scrollTop()^(docs)设置为该位置：

var top = $('#div_' + element_id).position().top;
$(window).scrollTop( top );

【讨论】：

+1 用于我根本不知道的本机 scrollIntoView。有那么一刻我以为是jquery。 :)

@yetanothercode：感谢您添加 MDN 链接。昨晚我有点懒惰。 :o)

position().top 不正确，因为它与父元素相关。您应使用与文档相关的offset().top。

我将此与公认的答案结合起来，效果很好：function($) $.fn.goTo = function() $(this)[0].scrollIntoView(true); return this; // for chaining... )(jQuery);

来自 MDN：scrollIntoView is experimental technology 以及它们的兼容性仅适用于 firefox

【参考方案2】：

插件形式的标准技术如下所示：

(function($) 
    $.fn.goTo = function() 
        $('html, body').animate(
            scrollTop: $(this).offset().top + 'px'
        , 'fast');
        return this; // for chaining...
    
)(jQuery);

然后你可以说$('#div_element2').goTo(); 滚动到<div id="div_element2">。选项处理和可配置性留给读者练习。

【讨论】：

一个问题是，为什么要为 'html, body' 而不仅仅是 'body' 制作动画？

@Lior：老实说，我现在这样做是因为我一直这样做；我认为'html,body'的最初原因是为了处理浏览器的差异。

太棒了。非常有用。

我添加了一个变量，这样，如果有一个元素仍在下方的标题，我可以传递一个否定值以更早地停止滚动：usage: @987654325 @函数： (function ($) $.fn.goTo = function (addToScroll) if (!addToScroll) addToScroll = 0; $('html, body').animate( scrollTop: ($(this).offset().top + addToScroll) + 'px' , 'fast'); return this; // for chaining... )(jQuery);

【参考方案3】：

这是一个简单的 javascript

当您需要将屏幕滚动到具有 id="yourSpecificElementId" 的元素时调用它

window.scroll(0,findPos(document.getElementById("yourSpecificElementId")));

你需要这个函数来工作：

//Finds y value of given object
function findPos(obj) 
    var curtop = 0;
    if (obj.offsetParent) 
        do 
            curtop += obj.offsetTop;
         while (obj = obj.offsetParent);
    return [curtop];
    

屏幕将滚动到您的特定元素。

【讨论】：

返回数组中的值是否有特定原因？

@Zze 这样就可以直接传给window.scroll了。 developer.mozilla.org/en-US/docs/Web/API/Window/scroll 或者至少我猜这是他的意图。编辑：我现在意识到滚动不接受数组作为参数。忽略我的评论。

【参考方案4】：

要滚动到页面上的特定元素，您可以在jQuery(document).ready(function($)...) 中添加一个函数，如下所示：

$("#fromTHIS").click(function () 
    $("html, body").animate( scrollTop: $("#toTHIS").offset().top , 500);
    return true;
);

它在所有浏览器中都像一个魅力。根据需要调整速度。

【参考方案5】：

document.getElementById("elementID").scrollIntoView();

同样的事情，但将其包装在一个函数中：

function scrollIntoView(eleID) 
   var e = document.getElementById(eleID);
   if (!!e && e.scrollIntoView) 
       e.scrollIntoView();
   

这甚至适用于 iPhone 上的 IFrame。

使用 getElementById 的示例： http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_getelementbyid

【讨论】：

简单，在 jQueryMobile 中运行良好，其中哈希标签可能有问题。

甜蜜。简单，适用于 iphone

截至 2016 年，scrollIntoView() 在技术上是非标准的 (ref)，但您几乎可以在任何地方使用它 (ref)。

它不滚动。它只是把你扔在上面。没有任何滚动。如何制作动画？

这是一个基本的 JavaScript 方法，没有动画。但是，它不需要框架（例如 JQuery）来运行。如果您想要动画，请使用此处提到的类似内容：***.com/questions/1586341/…