Q:

How to scrolldown on page refresh using jquery?

I have a div with height:400px i have to add content inside it like right now i added just a div thats name .content now i want to scrolldown when my page refresh.
My Code:-

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

A:

I think you should do it like this, instead of just scrolling the html, body. 
You should also scroll the .scrollDiv since this is the one with long content.

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

