自动滚动到页面底部

有很多答案试图计算文档的高度。但对我来说，它们都没有正确计算。然而，以下两个方法都有效：

jquery

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

或者只是js

    window.scrollTo(0,9999);

这是我试过并且有效的方法：

预期结果：

• 无滚动动画
• 在第一次加载时在页面底部加载
• 在所有刷新中都在页面底部加载

代码：

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

为什么这种方法可能比其他方法更有效：

像Chrome这样的浏览器具有内置预设，可以记住刷新后你在页面上的位置。仅使用 window.onload 是不起作用的，因为在调用类似下面这行代码之后，你的浏览器会自动将你滚动回到刷新前的位置：

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

这就是为什么我们需要添加以下内容：

history.scrollRestoration = "manual";

在 window.onload 之前禁用该内置功能。

参考资料：

window.onload 的文档：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

window.scrollTo 的文档：https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

history.scrollRestoration 的文档：https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration

如果您想滚动到特定的元素，一种简单的方法是：

每当您想向下滚动时，请调用此函数。

function scrollDown() {
 document.getElementById('scroll').scrollTop =  document.getElementById('scroll').scrollHeight
}

ul{
 height: 100px;
 width: 200px;
 overflow-y: scroll;
 border: 1px solid #000;
}

<ul id='scroll'>
<li>Top Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Bottom Here</li>
<li style="color: red">Bottom Here</li>
</ul>

<br />

<button onclick='scrollDown()'>Scroll Down</button>

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

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

虽然来晚了，但这里有一些仅使用JavaScript代码将任何元素滚动到底部的简单方法：

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

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

测试兼容性：

• Mac Firefox，Safari，Opera
• Windows Firefox，Opera，Safari，Internet Explorer 5.55+
• Linux未经测试，但应至少与Firefox兼容良好

要在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)", "");

 //**** 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)

我放弃了scrollto，转而尝试了锚点方法：

<a href="#target_id_at_bottom">scroll to the bottom</a>

html,
body {
    scroll-behavior: smooth;
}

祝你有美好的一天！

<div id="mydiv1">[your contents]</div>

document.getElementById("mydiv1").scrollIntoView();