如何转到页面上的特定元素？

IT技术 javascript jquery html
2021-01-12 09:51:07

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

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

那么有没有其他方法可以通过 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>
5个回答

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

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

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

否则，有一个scrollTo()插件的jQuery就可以使用。

或者只是得到top position()（文档）的元素，并设置scrollTop()（文档）到该位置：

var top = $('#div_' + element_id).position().top;
$(window).scrollTop( top );
来自 MDN：scrollIntoView is experimental technology并且从它们的兼容性来看仅适用于 Firefox
2021-03-20 09:51:07
我将其与公认的答案相结合，结果很好： function($) { $.fn.goTo = function() { $(this)[0].scrollIntoView(true); return this; // for chaining... } })(jQuery);
2021-03-25 09:51:07
@yetanothercode：感谢您添加 MDN 链接。我昨晚有点懒。:o)
2021-03-28 09:51:07
position().top不正确，因为它是相对于父元素的。您应使用offset().top与文档相关的哪个。
2021-04-06 09:51:07
+1 对于我根本不知道的本机 scrollIntoView。一时间我以为是jquery。:)
2021-04-08 09:51:07

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

(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">. 选项处理和可配置性留给读者作为练习。

惊人的。很有用。
2021-03-19 09:51:07
一个问题是，为什么要为 'html, body' 而不仅仅是 'body' 设置动画？
2021-03-30 09:51:07
@Lior：老实说，我现在这样做是因为我一直都是这样做的；我认为最初的原因'html,body'是处理浏览器差异。
2021-04-06 09:51:07
我添加了一个变量，这样，如果有一个元素仍在下面的标题，我可以传递一个负数来提前停止滚动：用法： $('#element').goTo(-50); 功能： (function ($) { $.fn.goTo = function (addToScroll) { if (!addToScroll) { addToScroll = 0; } $('html, body').animate({ scrollTop: ($(this).offset().top + addToScroll) + 'px' }, 'fast'); return this; // for chaining... } })(jQuery);
2021-04-11 09:51:07 
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

截至 2016 年，scrollIntoView()在技​​术上是非标准的（ref），但无论如何你几乎可以在任何地方使用它（ref）。
2021-03-15 09:51:07
它不滚动。它只会让你处于领先地位。没有任何滚动。如何动画？
2021-03-16 09:51:07
这是一个基本的 JavaScript 方法，没有动画。但是，它不需要框架（例如 JQuery）来运行。如果您想要动画，请使用此处提到的类似内容：stackoverflow.com/questions/1586341/...
2021-03-17 09:51:07
简单，在 jQueryMobile 中运行良好，其中散列标签可能有问题。
2021-03-20 09:51:07
亲爱的。简单且适用于 iphone
2021-03-31 09:51:07

这是一个简单的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 或者至少我猜这是他的意图。编辑：我现在意识到滚动不接受数组作为参数。无视我的评论。
2021-03-31 09:51:07
返回数组中的值是否有特定原因？
2021-04-05 09:51:07

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

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

它在所有浏览器中都具有魅力。根据您的需要调整速度。

其它你可能感兴趣的问题
上一篇如何在 ReactJS 中使用 JQuery 下一篇如何将 JavaScript 文件链接到 HTML 文件？