自动滚动到页面底部

我找到了一个技巧来实现这个目标。
在页面底部放置一个文本输入框，并在需要滚动到底部时调用jquery焦点。
将其设置为只读，并使用漂亮的CSS清除边框和背景。

今日免费次数已满, 请开通会员/明日再来

<div id="app">
    <button onClick="scrollToBottom()">Scroll to Bottom</button>
    <div class="row">
        <div class="col-md-4">
            <br>
            <h4>Details for Customer 1</h4>
            <hr>
            <!-- sequence Id -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="ID">
            </div>
            <!-- name -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Name">
            </div>
            <!-- description -->
            <div class="form-group">
                <textarea type="text" style="min-height: 100px" placeholder="Description" ></textarea>
            </div>
            <!-- address -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Address">
            </div>
            <!-- postcode -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Postcode">
            </div>
            <!-- Image -->
            <div class="form-group">
                <img style="width: 100%; height: 300px;">
                <div class="custom-file mt-3">
                    <label class="custom-file-label">{{'Choose file...'}}</label>
                </div>
            </div>
            <!-- Delete button -->
            <div class="form-group">
                <hr>
                <div class="row">
                    <div class="col">
                        <button class="btn btn-success btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to save">Save</button>
                        <button class="btn btn-success btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to update">Update</button>
                    </div>
                    <div class="col">
                        <button class="btn btn-danger btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to remove">Remove</button>
                    </div>
                </div>
                <hr>
            </div>
        </div>
    </div>
</div>

CSS

body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
}

#app {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    transition: all 0.2s;
}

JS

function scrollToBottom() {
    scrollInterval;
    stopScroll;

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

    var stopScroll = setInterval(function () {
        clearInterval(scrollInterval);
    }, 100);
}

已在最新版本的Chrome、FF、Edge和原生Android浏览器上进行了测试。以下是一个示例：

https://jsfiddle.net/cbruen1/18cta9gd/16/

我们可以使用ref和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"
        >

这将起作用。

使用jquery的简单示例

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

window.scrollTo(0,1e10);

总是有效的。

1e10是一个很大的数字，因此它总是页面的末尾。

我也遇到过这个问题。在某个时间点，我的div元素没有完全加载，scrollTop属性被初始化为scrollHeight的当前值，而不是正确的最终值。
我的项目使用Angular 8，我所做的是：
1. 我使用了viewchild来在.ts文件中获取元素。 2. 我继承了AfterViewChecked事件，并在其中放置了一行代码，该代码指定viewchild元素必须将scrollTop值考虑在内，即(this.viewChildElement.nativeElement.scrollTop = this.viewChildElement.nativeElement.scrollHeight;)。
AfterViewChecked事件会触发几次，并最终从scrollHeight获得正确的值。

这将保证滚动到底部

头代码

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

使用React.js，这是可工作的代码。

        //auto scroll to the bottom 
    useEffect(()=>{
      const chatHolder = document.getElementById('chats-wrapper')
       if(chatHolder) {
          chatHolder.scrollIntoView({behavior: "smooth"})
       }
  },[chats])

可能你的代码中有 "autofocus" 的地方