自动滚动到页面底部

Question

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

我怎么能用 jQuery 做到这一点？

原文由 jat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

jQuery 不是必需的。我从谷歌搜索中获得的大多数顶级结果都给了我这个答案：

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

如果您有嵌套元素，则文档可能不会滚动。 在这种情况下，您需要定位滚动的元素并使用它的滚动高度。

window.scrollTo(0, document.querySelector(".scrollingContainer").scrollHeight);

您可以将其与问题的 onclick 事件联系起来（即 <div onclick="ScrollToBottom()" ... ）。

您可以查看一些其他来源：

• http://www.sourcetricks.com/2010/07/javascript-scroll-to-bottom-of-page.html

• http://www.alecjacobson.com/weblog/?p=753

• http://www.mediacollege.com/internet/javascript/page/scroll.html

• http://www.electrictoolbox.com/jquery-scroll-bottom/

原文由 Zhihao 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

将整个页面滚动到底部：

 const scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;

您可以在 此处 查看演示

要将特定元素滚动到底部：

 const scrollToBottom = (id) => {
    const element = document.getElementById(id);
    element.scrollTop = element.scrollHeight;
}

这是 演示

这是它的工作原理：

参考： scrollTop ， scrollHeight ， clientHeight

更新： 最新版本的 Chrome (61+) 和 Firefox 不支持主体滚动，请参阅： https ://dev.opera.com/articles/fixing-the-scrolltop-bug/

原文由 Tho 发布，翻译遵循 CC BY-SA 4.0 许可协议