一个使用jquery的简单例子

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

这里有一个对我有用的方法:

预期结果:

无滚动动画 在第一次加载页面底部加载 加载在页面底部的所有刷新

代码:

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

为什么这种方法比其他方法更有效:

像Chrome这样的浏览器有一个内置的预设，可以在刷新后记住你在页面上的位置。只是一个窗口。onload不起作用，因为你的浏览器会自动滚动你在刷新之前的位置，在你调用一行后，如:

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

这就是为什么我们需要补充:

history.scrollRestoration = "manual";

在窗户前。Onload首先禁用该内置功能。

引用:

窗口的文档。onload: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

窗口的文档。scrollTo: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

历史文档。scrollRestoration: https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration

你也可以用动画来做这个，非常简单

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

希望有所帮助, 谢谢你！

我找到了一个诀窍。

在页面底部放置一个输入类型文本，并在需要时调用jquery focus。

使它为只读和漂亮的css清除边界和背景。

CSS-Only ? !

一个有趣的css替代方案:

display: flex; 
flex-direction: column-reverse;

  /* ...probably usually along with: */

overflow-y: scroll;  /* or hidden or auto */
height: 100px; /* or whatever */

它不是万无一失的，但我发现它在一些情况下很有帮助。

文档:flex, flex-direction, overflow-y

演示:

var i=0, foo='Lorem Ipsum & foo在酒吧或blah !和“。分割(' '); setInterval(函数(){demo.innerHTML + = foo [i + + % foo。长度)+ ' '},200) #{演示显示:flex; flex-direction: column-reverse; overflow-y:滚动; 宽度:150 px; 身高:150 px; 边框:3px纯黑色;｝ 身体{字体类型:arial,无衬线; 字体大小:15 px;｝ Autoscrolling演示:& # x1f43e; < div id =“演示”> < / div >

你可以在任何需要调用它的地方使用这个函数:

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

}

jquery.com ScrollTo