防止浏览器刷新时自动滚动

You should be able to.

Onload, check if window.location.hash has a value. If it does, grab the element with an id that matches the hash value. Find the position of the element (recursive calls to offsetTop/offsetLeft) and then pass those values into the window.scrollTo(x, y) method.

This should scroll the page to the desired element.

This solution is no longer recommended due to changes in browser behavior. See other answers.

Basically, if an anchor is used we bind to the windows scroll event. The idea being that the first scroll event has to belong to the automatic repositioning done by the browser. When this occurs we do our own repositioning and then remove the bound event. This prevents subsequent page scrolls from borking the system.

$(document).ready(function() {
if (window.location.hash) {
//bind to scroll function
$(document).scroll( function() {
var hash = window.location.hash
var hashName = hash.substring(1, hash.length);
var element;


//if element has this id then scroll to it
if ($(hash).length != 0) {
element = $(hash);
}
//catch cases of links that use anchor name
else if ($('a[name="' + hashName + '"]').length != 0)
{
//just use the first one in case there are multiples
element = $('a[name="' + hashName + '"]:first');
}


//if we have a target then go to it
if (element != undefined) {
window.scrollTo(0, element.position().top);
}
//unbind the scroll event
$(document).unbind("scroll");
});
}


});

On Chrome, even if you force scrollTop to 0 it will jump afterwards after the first scroll event.

You should bind the scroll to this:

$(window).on('beforeunload', function() {
$(window).scrollTop(0);
});

So the browser is tricked to believe that it was on the beginning before the refresh.

Here's a a more general approach. Instead of trying to prevent the browser from scrolling (or jumping to the top as it would look like) I just restore the previous position on the page. I.e. I'm recording the current y-offset of the page in localStorage and scroll to this position once the page has loaded.

function storePagePosition() {
var page_y = window.pageYOffset;
localStorage.setItem("page_y", page_y);
}




window.addEventListener("scroll", storePagePosition);




var currentPageY;


try {
currentPageY = localStorage.getItem("page_y");


if (currentPageY === undefined) {
localStorage.setItem("page_y") = 0;
}


window.scrollTo( 0, currentPageY );
} catch (e) {
// no localStorage available
}

After number of failures finally I managed to do the trick. anzo is correct here as using beforeunload will make the page jump to top when a user reloads the page or clicks a link. So unload is the clearly way to do this.

$(window).on('unload', function() {
$(window).scrollTop(0);
});

Javascript way(Thanks ProfNandaa):

window.onunload = function(){ window.scrollTo(0,0); }

EDIT: 16/07/2015

The jump issue is still there with Firefox even with unload event.

You can just put a # at the end so the page will load at the top.

Works on all browsers, mobile and desktop, because it is so simple.

$(document).ready(function() {
var url = window.location.href;
console.log(url);
if( url.indexOf('#') < 0 ) {
window.location.replace(url + "#");
} else {
window.location.replace(url);
}

});

// This loads the page with a # at the end.

To disable automatic scroll restoration just add this tag to head section.

<script>history.scrollRestoration = "manual"</script>

Supported by all modern browsers

This works for me.

    //Reset scroll top


history.scrollRestoration = "manual"


$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});

this works absolutely fine. Nice and clean javascript

    var objDiv = document.getElementById("chatbox");
if ( window.history.replaceState ) {
objDiv.scrollTop = objDiv.scrollHeight;


window.history.replaceState( null, null, window.location.href );
}