Scroll to div after page load

Question

I want to make my page scroll to div id='#pageload' if it is loaded from url http://www.website.com/#pageload

I used the code below but all pages redirect to http://www.website.com/#pageload

if(document.location ="/#pageload") {
    $('html, body').animate({
        scrollTop: $('#pageload').offset().top
    }, 'slow');
}

How can I fix it? Thank you very much.

Answer 1

A couple of syntax errors seem to be in your code. Note that in your if() you used one equal sign (assignment sign) , when you should use two or three (assertion sign) . Check out the snippet sample.

 //you can get rid off that part document.location.hash="#d"; //set url /#d dynamically document.body.scrollTop = "0px"; //set scroll to 0 //you can get rid off that part if(document.location.hash === "#d"){ $('body').animate({ scrollTop: $('#d').offset().top }, 'slow'); } 

 .cont{ width: 200px; height:500px; margin:10px; background-color:#fce4ec; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cont" id="a">a</div> <div class="cont" id="b">b</div> <div class="cont" id="c">c</div> <div class="cont" id="d">d</div> <div class="cont" id="e">e</div> <div class="cont" id="f">f</div> 

Answer 2

I want to make my page scroll to div id='#pageload' if it is loaded from url http://www.website.com/#pageload

The key consideration here is that you need to use a hash fragment which is different from the id of the element you wish the newly loaded window to scroll down to.

If the hash fragment and the element id are identical, the window, as it loads, will automatically position itself with that element at the top of the viewport... and then there will be nowhere for the window to scroll to and, consequently, no animation.

In the example below,

• the hash fragment is #topageload
• the element id is #pageload

Working Example:

 $(document).ready(function(){ // The line below (and the second condition involving winLocHash are included just so this example works var winLocHash = '#toppageload'; if ((window.location.hash === '#topageload') || (winLocHash === '#toppageload')) { $('html, body').animate({scrollTop: $("#pageload").offset().top}, 3000); } }); 

 body { background-color: rgb(255,255,0); } div { width: 100px; height: 100px; margin: 24px; } div:nth-of-type(odd) { background-color: rgb(255,0,0); } div:nth-of-type(even) { background-color: rgb(0,0,255); } #pageload { color: rgb(255,255,255); line-height: 100px; font-weight: bold; text-align: center; background-color: rgb(0,127,0); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div id="pageload">#Pageload</div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>