How to disable anchor jump when loading a page

drake035 picture drake035 · Nov 24, 2014 · Viewed 7.2k times · Source

When I visit my_site.com/page.php#something, the scroll position is the one of the element carrying this particular hashtag rather than the top of the page.

Executing window.scrollTo(0, 0); doesn't change this fact. What can then?

EDIT: also tried accepted answer from How to disable anchor "jump" when loading a page?. Doesn't seem to work anymore.

Answer

Larzan picture Larzan · Apr 23, 2015

What you have to do is store the hashtag for later use and then delete it so that the browser doesn't have anything to scroll to.

It is important that you do not put that part of the code in the $() or $(window).load() functions as it would be to late and the browser already have moved to the tag.

// store the hash (DON'T put this code inside the $() function, it has to be executed 
// right away before the browser can start scrolling!
var target = window.location.hash,
    target = target.replace('#', '');

// delete hash so the page won't scroll to it
window.location.hash = "";

// now whenever you are ready do whatever you want
// (in this case I use jQuery to scroll to the tag after the page has loaded)
$(window).load(function() {
    if (target) {
        $('html, body').animate({
            scrollTop: $("#" + target).offset().top
        }, 700, 'swing', function () {});
    }
});