如何使用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因为这是内容较长的内容。

    $(function() {

            if (window.performance) {

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

                    scrollTop: document.body.scrollHeight

                }, 'slow')

                $('.scrollDiv').animate({

                    scrollTop: $('.scrollDiv')[0].scrollHeight

                }, '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 2

如果预计内容会增加，您可以max-height一起使用。height

$(function() {

            if (window.performance) {

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

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

                }, 'slow')

            };

        });

.scrollDiv {

            height: 300px;

            max-height:1500px;

           }

        

        .content {

            height:300px;

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

    var objDiv = document.getElementById("scrollToBottom");

    objDiv.scrollTop = objDiv.scrollHeight;

                    $(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" id="scrollToBottom">

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

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

            </div>

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

        </div>

Answer 4

您的 JavaScript 代码是正确的。

它不起作用的原因是因为你将scrollDiv高度设置为 300，但它content是 1500；

将您的值更改scrollDiv为 1500，您会看到它有效。