Как прокрутить страницу на странице refre sh, используя jquery?

Question

У меня есть div с height:400px Мне нужно добавить содержимое внутри него, как сейчас, я добавил просто имя div .content Теперь я хочу прокрутить страницу, когда моя страница обновится sh.

Мой код: -

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

You are trying to scroll to the bottom of DIV.scrollDiv?

If yes, use this.

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



<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    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 3

вы можете использовать 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 4

Ваш код JavaScript правильный.

Причина, по которой он не работает, заключается в том, что вы установили scrollDiv высоту на 300, но content равно 1500;

измените scrollDiv на 1500, вы увидите, что это работает.