Javascript 自动滚动到页面底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11715646/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scroll Automatically to the Bottom of the Page
提问by jat
Consider I have a list of questions. When I click on the first question, it should automatically take me to the bottom of the page.
考虑我有一个问题列表。当我点击第一个问题时，它应该会自动将我带到页面底部。
For a matter of fact, I do know that this can be done using jQuery.
事实上，我知道这可以使用 jQuery 来完成。
So, could you provide me with some documentation or some links where I can find answer to this question?
那么，您能否向我提供一些文档或一些链接，以便我可以找到此问题的答案？
EDIT: Need to scroll to a particular HTML elementat the bottom of the page
编辑：需要滚动到页面底部的特定 HTML元素
回答by Zhihao
jQuery isn't necessary. Most of the top results I got from a Google search gave me this answer:
jQuery 不是必需的。我从 Google 搜索中获得的大多数最佳结果都给了我这个答案：
window.scrollTo(0,document.body.scrollHeight);
Where you have nested elements, the document might not scroll. In this case, you need to target the element that scrolls and use it's scroll height instead.
如果您有嵌套元素，文档可能不会滚动。在这种情况下，您需要定位滚动的元素并使用它的滚动高度。
window.scrollTo(0,document.querySelector(".scrollingContainer").scrollHeight);
window.scrollTo(0,document.querySelector(".scrollingContainer").scrollHeight);
You can tie that to the onclickevent of your question (i.e. <div onclick="ScrollToBottom()" ...).
您可以将其与问题的onclick事件联系起来（即<div onclick="ScrollToBottom()" ...）。
Some additional sources you can take a look at:
您可以查看一些其他来源：
回答by Tho
If you want to scroll entire page to the bottom:
如果要将整个页面滚动到底部：
var scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;
See the sampleon JSFiddle
查看样品上的jsfiddle
If you want to scroll an element to the bottom:
如果要将元素滚动到底部：
function gotoBottom(id){
var element = document.getElementById(id);
element.scrollTop = element.scrollHeight - element.clientHeight;
}
And that's how it works:
这就是它的工作原理：
Ref: scrollTop, scrollHeight, clientHeight
参考：scrollTop，scrollHeight，clientHeight
UPDATE:Latest versions of Chrome (61+) and Firefox does not support scrolling of body, see: https://dev.opera.com/articles/fixing-the-scrolltop-bug/
更新：最新版本的 Chrome (61+) 和 Firefox 不支持滚动正文，请参阅：https: //dev.opera.com/articles/fixing-the-scrolltop-bug/
回答by shmuli
Vanilla JS implementation:
Vanilla JS 实现：
element.scrollIntoView(false);
https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView
https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView
回答by user5978325
You can use this to go down the page in an animation format.
您可以使用它以动画格式向下浏览页面。
$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");
回答by PixelsTech
Below should be the cross browser solution. It has been tested on Chrome, Firefox, Safari and IE11
下面应该是跨浏览器的解决方案。它已经在 Chrome、Firefox、Safari 和 IE11 上进行了测试
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
window.scrollTo(0,document.body.scrollHeight); doesn't work on Firefox, at least for Firefox 37.0.2
window.scrollTo(0,document.body.scrollHeight); 不适用于 Firefox，至少适用于 Firefox 37.0.2
回答by NrNazifi
You can use this function wherever you need to call it:
你可以在任何需要调用它的地方使用这个函数：
function scroll_to(div){
if (div.scrollTop < div.scrollHeight - div.clientHeight)
div.scrollTop += 10; // move down
}
回答by Konard
Sometimes the page extends on scroll to buttom (for example in social networks), to scroll down to the end (ultimate buttom of the page) I use this script:
有时页面滚动到底部（例如在社交网络中），向下滚动到最后（页面的最终底部）我使用这个脚本：
var scrollInterval = setInterval(function() {
document.documentElement.scrollTop = document.documentElement.scrollHeight;
}, 50);
And if you are in browser's javascript console, it might be useful to be able to stop the scrolling, so add:
如果您在浏览器的 javascript 控制台中，能够停止滚动可能很有用，因此添加：
var stopScroll = function() { clearInterval(scrollInterval); };
And then use stopScroll();.
然后使用stopScroll();.
If you need to scroll to particular element, use:
如果您需要滚动到特定元素，请使用：
var element = document.querySelector(".element-selector");
element.scrollIntoView();
Or universal script for autoscrolling to specific element (or stop page scrolling interval):
或用于自动滚动到特定元素（或停止页面滚动间隔）的通用脚本：
var notChangedStepsCount = 0;
var scrollInterval = setInterval(function() {
var element = document.querySelector(".element-selector");
if (element) {
// element found
clearInterval(scrollInterval);
element.scrollIntoView();
} else if((document.documentElement.scrollTop + window.innerHeight) != document.documentElement.scrollHeight) {
// no element -> scrolling
notChangedStepsCount = 0;
document.documentElement.scrollTop = document.documentElement.scrollHeight;
} else if (notChangedStepsCount > 20) {
// no more space to scroll
clearInterval(scrollInterval);
} else {
// waiting for possible extension (autoload) of the page
notChangedStepsCount++;
}
}, 50);
回答by Ricardo Vieira
you can do this too with animation, its very simple
你也可以用动画来做到这一点，它非常简单
$('html, body').animate({
scrollTop: $('footer').offset().top
//scrollTop: $('#your-id').offset().top
//scrollTop: $('.your-class').offset().top
}, 'slow');
hope helps, thank you
希望有帮助，谢谢
回答by TLJ
one liner to smooth scroll to the bottom
一个衬垫平滑滚动到底部
window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });
To scroll up simply set topto 0
向上滚动只需设置top为0
回答by RegarBoy
You can attach any idto reference attribute hrefof link element:
您可以将任何附加id到href链接元素的引用属性：
<a href="#myLink" id="myLink">
Click me
</a>
In the example above when user clicks Click meat the bottom of page, navigation navigates to Click meitself.
在上面的示例中，当用户单击Click me页面底部时，导航导航到Click me自身。
