如何使用jquery在页面刷新时向下滚动？

Question

我有一个 div，height:400px我必须在其中添加内容，就像现在我只添加了一个 div 的名称，.content现在我想在页面刷新时向下滚动。

我的代码：-

    $(function() {

            if (window.performance) {

                $('html, body').animate({

                    scrollTop: $('.bottom').offset().top

                }, 'slow')

            };

        });

   .scrollDiv {

            height: 300px;

            overflow: auto;

        }

        

        .content {

            height: 1500px;

        }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

   

     <div class="contianer">

        <div class="scrollDiv">

            <div class="content"></div>

            <p>This content should be appear on page refresh</p>

        </div>

        <div class="bottom"></div>

    </div>

Answer 1

我认为你应该这样做，而不是仅仅滚动html, body.您还应该滚动 ，.scrollDiv因为这是内容较长的内容。&nbsp; &nbsp; $(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (window.performance) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('html, body').animate({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scrollTop: document.body.scrollHeight&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, 'slow')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.scrollDiv').animate({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scrollTop: $('.scrollDiv')[0].scrollHeight&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, 'slow')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp;.scrollDiv {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 300px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; overflow: auto;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; .content {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 1500px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">&nbsp; &nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>&nbsp; &nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>&nbsp; &nbsp; <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;<div class="contianer">&nbsp; &nbsp; &nbsp; &nbsp; <div class="scrollDiv">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="content"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>This content should be appear on page refresh</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="bottom"></div>&nbsp; &nbsp; </div>

Answer 2

如果预计内容会增加，您可以max-height一起使用。height$(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (window.performance) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('html, body').animate({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scrollTop: $('.bottom').offset().top&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, 'slow')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; });.scrollDiv {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 300px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max-height:1500px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; .content {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height:300px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max-height: 1500px;&nbsp; &nbsp; &nbsp; &nbsp; }<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">&nbsp; &nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>&nbsp; &nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>&nbsp; &nbsp; <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;<div class="contianer">&nbsp; &nbsp; &nbsp; &nbsp; <div class="scrollDiv">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="content"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>This content should be appear on page refresh</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="bottom"></div>&nbsp; &nbsp; </div>

Answer 3

You are trying to scroll to the bottom of DIV.scrollDiv?If yes, use this.var objDiv = document.getElementById("scrollToBottom");objDiv.scrollTop = objDiv.scrollHeight;&nbsp; &nbsp; var objDiv = document.getElementById("scrollToBottom");&nbsp; &nbsp; objDiv.scrollTop = objDiv.scrollHeight;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (window.performance) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('html, body').animate({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scrollTop: $('.bottom').offset().top&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, 'slow')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; .scrollDiv {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 300px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; overflow: auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .content {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 1500px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;<link rel="stylesheet"&nbsp;&nbsp; &nbsp; href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">&nbsp; &nbsp; &nbsp; &nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">&nbsp;&nbsp; &nbsp;</script>&nbsp; &nbsp; &nbsp; &nbsp; <script&nbsp;&nbsp; &nbsp; src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">&nbsp;&nbsp; &nbsp;</script>&nbsp; &nbsp; &nbsp; &nbsp; <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">&nbsp;&nbsp; &nbsp;</script>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="contianer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="scrollDiv" id="scrollToBottom">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="content"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>This content should be appear on page refresh</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="bottom"></div>&nbsp; &nbsp; &nbsp; &nbsp; </div>

Answer 4

您的 JavaScript 代码是正确的。它不起作用的原因是因为你将scrollDiv高度设置为 300，但它content是 1500；将您的值更改scrollDiv为 1500，您会看到它有效。