How to disable anchor jump when loading a page

Question

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.

Answer 1

Having this HTML code:

<a href="#test">link</a>
<div id="test"></div>

You can avoid scrolling to the div element and instead scrolling to the top of the window by using this code:

$("a").on("click", function(e) {
    e.preventDefault();
    window.scrollTo(0, 0);
});

EDIT:

You can try to add this:

var firstVisit = true;
$(window).scroll(function() {
    if (firstVisit) {
        window.scrollTo(0, 0);
        firstVisit = false;
    }
});

Answer 2

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 () {});
    }
});