Javascript 自动滚动到页面底部

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

事实上，我知道这可以通过jQuery实现

所以，你能给我提供一些文档或链接，让我找到这个问题的答案吗

---

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

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

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

如果有嵌套元素，文档可能不会滚动在本例中，您需要以滚动的元素为目标，并使用其滚动高度

window.scrollTo（0，document.querySelector（“.scrollingContainer”）.scrollHeight）

您可以将其与问题的
onclick
事件联系起来（即
您可以尝试一个不错的javascript插件

示例：

function SomeFunction() {
  // your code
  // Pass an id attribute to scroll to. The # is required
  Gentle_Anchors.Setup('#destination');
  // maybe some more code
}

element.scrollIntoView(false);

兼容性测试日期：

function SomeFunction() {
  // your code
  // Pass an id attribute to scroll to. The # is required
  Gentle_Anchors.Setup('#destination');
  // maybe some more code
}

element.scrollIntoView(false);


Mac Firefox、Safari、Opera
Windows Firefox、Opera、Safari、Internet Explorer 5.55+
Linux未经测试，但至少可以与Firefox配合使用
您可以在任何需要调用此功能的地方使用此功能：

function scroll_to(div){
   if (div.scrollTop < div.scrollHeight - div.clientHeight)
        div.scrollTop += 10; // move down

}

功能滚动到（div）{
if（div.scrollTop

你也可以通过动画来实现这一点，它非常简单

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

希望有帮助，
谢谢您
香草JS实现：

function SomeFunction() {
  // your code
  // Pass an id attribute to scroll to. The # is required
  Gentle_Anchors.Setup('#destination');
  // maybe some more code
}

element.scrollIntoView(false);

下面应该是跨浏览器解决方案。它已经在Chrome、Firefox、Safari和IE11上进行了测试

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

window.scrollTo（0，document.body.scrollHeight）；在Firefox上不起作用，至少在Firefox 37.0.2上不起作用如果要将整个页面滚动到底部：

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

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

function scrollToBottom(e) {
  e.scrollTop = e.scrollHeight - e.getBoundingClientRect().height;
}

请参见上的示例

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

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

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

function scrollToBottom(e) {
  e.scrollTop = e.scrollHeight - e.getBoundingClientRect().height;
}

这就是它的工作原理：


参考：

更新：最新版本的Chrome（61+）和Firefox不支持滚动正文，请参阅：
以下是我的解决方案：

 //**** scroll to bottom if at bottom

 function scrollbottom() {
    if (typeof(scr1)!='undefined') clearTimeout(scr1)   
    var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
    var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
    if((scrollTop + window.innerHeight) >= scrollHeight-50) window.scrollTo(0,scrollHeight+50)
    scr1=setTimeout(function(){scrollbottom()},200) 
 }
 scr1=setTimeout(function(){scrollbottom()},200)

您可以使用它以动画格式在页面中向下移动

$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");

派对迟到了，但这里有一些简单的纯javascript代码，可以将任何元素滚动到底：

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

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

function scrollToBottom(e) {
  e.scrollTop = e.scrollHeight - e.getBoundingClientRect().height;
}

有时页面会在滚动时延伸到buttom（例如在社交网络中），要向下滚动到最后（页面的最终按钮），我使用以下脚本：

var scrollInterval = setInterval(function() { 
    document.documentElement.scrollTop = document.documentElement.scrollHeight;
}, 50);

如果您在浏览器的javascript控制台中，能够停止滚动可能会很有用，因此添加：

var stopScroll = function() { clearInterval(scrollInterval); };

然后使用
stopScroll（）；

如果需要滚动到特定元素，请使用：

var element = document.querySelector(".element-selector");
element.scrollIntoView();

或用于自动滚动到特定元素的通用脚本（或停止页面滚动间隔）：

您可以将任何
id
附加到链接元素的引用属性
href
：

<a href="#myLink" id="myLink">
    Click me
</a>



在上面的示例中，当用户单击页面底部的
单击我
时，导航会导航到
单击我
本身。
要在Selenium中向下滚动，请使用以下代码：

直到底部下拉，滚动到页面的高度。
使用下面的javascript代码，在javascript和React中都能很好地工作

JavascriptExecutor jse = (JavascriptExecutor) driver; // (driver is your browser webdriver object) 
jse.executeScript("window.scrollBy(0,document.body.scrollHeight || document.documentElement.scrollHeight)", "");

如果要向下滚动到特定元素，可以使用一种简单的方法

当您想要向下滚动时，调用此函数


函数向下滚动（）{
document.getElementById（'scroll'）.scrollTop=document.getElementById（'scroll'）.scrollHeight
}
ul{
高度：100px；
宽度：200px；
溢出y：滚动；
边框：1px实心#000；
}

在这上面
这里有东西
这里有东西
这里有东西
这里有东西
这里有东西
这里有东西
这里有东西
这里有东西
这里有东西
下面
底部在此



向下滚动
这么多的答案试图计算文档的高度。但对我来说计算不正确。但是，这两种方法都有效：

jquery

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

或者只是js

    window.scrollTo(0,9999);

窗口。滚动到（0,1e10）

总是有用的

1e10是一个很大的数字。因此它始终是页面的结尾。
如果有人搜索

你只需要向下滚动将其添加到你的div中

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

   <div class="my-list" #scrollMe [scrollTop]="scrollMe.scrollHeight">
   </div>

#scrollMe[scrollTop]=“scrollMe.scrollHeight”
一行可平滑滚动到底部

window.scrollTo（{left:0，top:document.body.scrollHeight，行为：“平滑”}）；

要向上滚动，只需将
top
设置为
0
即可保证向下滚动

头码

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


函数scrollToBottom（）{
$（'html，body'）.scrollTop（$（'html，body'）[0]。scrollHeight）；
}

正文代码

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

一幅画抵得上千言万语：

关键是：

document.documentElement.scrollTo({
  left: 0,
  top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
  behavior: 'smooth'
});

它使用的是
document.documentElement
，这是
元素。它就像使用
窗口
，但我个人喜欢这样做，因为如果它不是整个页面而是一个容器，它的工作原理与此类似，只是您需要更改
document.body
和
document.documentElement到
文档.查询选择器（#容器id”）

例子：

设cLines=0；
让timerID=setInterval（函数（）{
让elSomeContent=document.createElement（“div”）；
如果（++cLines>33）{
清除间隔（timerID）；
elSomeContent.innerText=“这就是所有人！”；
}否则{
elSomeContent.innerText=新日期（）.toLocaleDateString（“en”{
dateStyle:“长”，
时间方式：“中等”
});
}
document.body.appendChild（elSomeContent）；
document.documentElement.scrollTo({
左:0,，
顶部：document.documentElement.scrollHeight-document.documentElement.clientHeight，
行为：“平滑”
});
}，1000）；
bod