有时页面会滚动到底部(例如在社交网络中)，向下滚动到最后(页面的最终底部)，我使用这个脚本:

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();

或通用脚本自动滚动到特定的元素(或停止页面滚动间隔):

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

这将保证滚动到底部

头代码

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

机构代码

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

如果有人在搜索Angular

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

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

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

我们可以使用ref和by getElementById滚动特定的模态或页面。

 const scrollToBottomModel = () => {
    const scrollingElement = document.getElementById("post-chat");
    scrollingElement.scrollTop = scrollingElement.scrollHeight;
  };

在模态体中，你可以调用上面的函数

 <Modal.Body
          className="show-grid"
          scrollable={true}
          style={{
            maxHeight: "calc(100vh - 210px)",
            overflowY: "auto",
            height: "590px",
          }}
          ref={input => scrollToBottomModel()}
          id="post-chat"
        >

会起作用

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 >

你可以试试Gentle Anchors，一个不错的javascript插件。

例子:

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应该没问题