Prevent Automatic Browser Scroll on Refresh

Prevent automatic browser scroll on refresh

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");
        });
    }

});

Disable brower's auto scroll after a page refresh?

For browsers that support history.scrollRestoration, the auto scroll behavior can be turned off:

if ('scrollRestoration' in history) {
  history.scrollRestoration = 'manual';
}

source: https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration

how to prevent browsers auto scroll on reload with javascript?

Here's a solution that works in FF (18), Chrome (24) and IE (9).

Putting the following in a script in the head section of your document:

function autoScroll() {
    var div = document.getElementById("mydiv");
    div.style.display = '';
    var top = div.offsetTop;
    if(window.scrollTop != top) 
        window.scrollTo(0, top);
}
function loadAutoScroll() {
    autoScroll();
    window.onload = null;
    return false;
}
function scrollAutoScroll() {
    autoScroll();
    window.setTimeout(function(){ window.onscroll = null; }, 100);
    return false;
}
window.onload = loadAutoScroll;
window.onscroll = scrollAutoScroll;

I'm sure a cleaner solution can be derived.

JavaScript: Prevent browser from restoring scroll positions when using the back button

Although it is experimental, you can try adjusting the History scrollRestoration from "auto" to "manual".

There are a few polyfills out there to help with cross-browser compatability too.

if ('scrollRestoration' in history) {  // Back off, browser, I got this...  history.scrollRestoration = 'manual';}

Prevent automatic browser scroll on refresh without hash

If I understand you right, localStorage or sessionStorage could be helpful.

Just cache the current scroll-offset if the page is reloaded (listening to beforeunload or unload) and then restore it when the page loads:

var $window = $(window).on({
  beforeunload: function() {
    window.sessionStorage.scrollLeft = $window.scrollLeft()
    window.sessionStorage.scrollTop = $window.scrollTop()
  },
  load: function() {
    $window.scrollLeft(window.sessionStorage.scrollLeft)
    $window.scrollTop(window.sessionStorage.scrollTop)
  }
})

How to let the chrome forget the page scroll position?

A simple way that I can say is to run this code on page load:

document.location = "#";

OR

window.scrollTo(0);

It set the browser viewport to the top of the page, again.

---

Related Topics