我有一份问题清单。当我点击第一个问题时,它会自动把我带到页面底部的特定元素。

我如何用jQuery做到这一点?


当前回答

这里有一个对我有用的方法:

预期结果:

无滚动动画 在第一次加载页面底部加载 加载在页面底部的所有刷新

代码:

<script>
    function scrollToBottom() {
        window.scrollTo(0, document.body.scrollHeight);
    }
    history.scrollRestoration = "manual";
    window.onload = scrollToBottom;
</script>

为什么这种方法比其他方法更有效:

像Chrome这样的浏览器有一个内置的预设,可以在刷新后记住你在页面上的位置。只是一个窗口。onload不起作用,因为你的浏览器会自动滚动你在刷新之前的位置,在你调用一行后,如:

window.scrollTo(0, document.body.scrollHeight);

这就是为什么我们需要补充:

history.scrollRestoration = "manual";

在窗户前。Onload首先禁用该内置功能。

引用:

窗口的文档。onload: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

窗口的文档。scrollTo: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

历史文档。scrollRestoration: https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration

其他回答

你也可以用动画来做这个,非常简单

$('html, body').animate({
   scrollTop: $('footer').offset().top
   //scrollTop: $('#your-id').offset().top
   //scrollTop: $('.your-class').offset().top
}, 'slow');

希望有所帮助, 谢谢你!

jQuery不是必需的。我从谷歌搜索中得到的大多数结果都是这样的答案:

window.scrollTo(0, document.body.scrollHeight);

在有嵌套元素的地方,文档可能无法滚动。在这种情况下,您需要以滚动的元素为目标,并使用其滚动高度。

nestedElement.scrollTo(0, nestedElement.scrollHeight);

你可以参考一些其他的来源:

http://www.alecjacobson.com/weblog/?p=753 http://www.mediacollege.com/internet/javascript/page/scroll.html http://www.electrictoolbox.com/jquery-scroll-bottom/

这将保证滚动到底部

头代码

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script language="javascript" type="text/javascript">
function scrollToBottom() {
  $('#html, body').scrollTop($('#html, body')[0].scrollHeight);
}
</script>

机构代码

<a href="javascript:void(0);" onmouseover="scrollToBottom();" title="Scroll to Bottom">&#9660; Bottom &#9660;</a>

那么多的答案试图计算文件的高度。但对我来说,这并不是正确的计算。然而,这两种方法都有效:

jquery

    $('html,body').animate({scrollTop: 9999});

或者只是js

    window.scrollTo(0,9999);

一个内线平滑滚动到底部

window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });

要向上滚动,只需将top设置为0