自动滚动到页面底部

Question

我有一个问题清单。当我点击第一个问题时，它应该会自动把我带到页面底部。

事实上，我确实知道这可以使用jQuery来完成。

所以，你能给我一些文件或一些链接，我可以找到这个问题的答案吗？

编辑：需要滚动到页面底部的特定HTML元素

Answer 1

相关问题

Answer 2

Vanilla JS实现：

element.scrollIntoView(false);

https://developer.mozilla.org/en-us/docs/web/api/element.ScrollinToView

Answer 3

如果要将整个页面滚动到底部：

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

请参阅JSFiddle上的示例

如果要将元素滚动到底部：

function gotoBottom(id){
   var element = document.getElementById(id);
   element.scrollTop = element.scrollHeight - element.clientHeight;
}

这就是它的工作原理：

参考：scrollTop,scrollHeight,clientHeight

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

Answer 4

jQuery不是必需的。我从谷歌搜索中得到的大多数排名靠前的结果都给了我这样的答案：

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

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

Window.ScrollTo(0，Document.QuerySelector（“.ScrollingContainer”）.ScrollHeight）；

您可以将其绑定到问题的onclick事件（即

)。

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

• 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/