18

Is there a way to disable the behavior where some modern browsers (Chrome and Safari) remember your scroll position on a page refresh?

Anthony
  • 2,371
  • 3
  • 20
  • 26
  • Why would you want to do that? It is good user experience to go back to that position. – putvande Sep 04 '13 at 15:08
  • @putvande 100% agree in most cases, but a use case would be when there is large table of data that adds new data to the top, and although we can dynamically update the data, if a user refreshes for whatever reason, we don't want to bring them back to their old scroll position. This is not the expected behavior from their perspective given this experience -- also this is just 1 use case, there are others that exist as well. – Anthony Sep 04 '13 at 15:11
  • 2
    Any page that uses infinite scroll for the loading experience will have this (unexpected) problem. – arxpoetica Nov 24 '14 at 17:40

6 Answers6

46

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

Cory Duncan
  • 1,145
  • 1
  • 10
  • 12
  • Since this is still an experimental property, does anyone know browser support? – Neil Monroe Jul 20 '17 at 23:04
  • Fantastic, just what I needed. In my case, I was dealing with an angular SPA application, and was working on retaining scroll position. The browser would restore the scroll position for the previous component before the router had a chance to navigate, leading to a jumpy scroll. Ooh, those pesky browsers... – cs95 Aug 08 '19 at 23:46
  • It's supported by most browsers https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration – Nathalia Xavier Oct 22 '19 at 15:00
3

Have you tried firing this after document is ready?

$(document).ready(function(){
    window.scrollTo(0, 0);
});

if that does not work...

$(document).ready(function(){
    setTimeout(function(){
        window.scrollTo(0, 0);
    }, 1);
});

Which will push this to the bottom of the call stack

Robert
  • 386
  • 1
  • 8
2

not just for chrome,but for all i think this will work well.

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

After update of your question:

I think its better if we use some cookies or session storage.

HIRA THAKUR
  • 17,189
  • 14
  • 56
  • 87
  • 5
    This was my thought as well - but I am not having any luck with this kind of callback - seems like chrome does the auto-scroll after onload fires. – Anthony Sep 04 '13 at 15:08
0

Instead of hoping a setTimout ends up at the bottom of the stack - I rather enforce it that we hit the scroll position we want. I still consider this a hack, I was hoping for some kind of browser event we bind to.

var scrollToYPos = 100;
var interval = setInterval(checkPos, 0);

function checkPos() {
    if ($(window).scrollTop() == scrollToYPos) {
        clearInterval(interval);
    } else {
        window.scrollTo( 0, scrollToYPos );
        checkPos();               
    }
}
Anthony
  • 2,371
  • 3
  • 20
  • 26
0

I encountered this same issue. Here's the basic solution I came up with:

      // scroll the user to the comments section if we need to
      wt = win.scrollTop();
      wb = wt + win.height();
      // if scroll position is 0, do this (it's a fresh user), otherwise
      // the browser is likely to resume the user's scroll position, in 
      // which case we don't want to do this
      yab.loaded().done(function() {
        // it seems that browsers (consistently) set the scroll position after
        // page load.  Accordingly wait a 1/4 second (I haven't tested this to the lowest
        // possible timeout) before triggering our logic
        setTimeout(function() {
          // if the window top is 0, scroll the user, otherwise the browser restored
          // the users scroll position (I realize this fails if the users scroll position was 0)
          if(wt === 0) {
            p = self.container.offset().top;
            if(wb != p) {
              win.scrollTop(p - th - 20);         
            }
          }              
        }, 250);
      });
Skone
  • 745
  • 4
  • 13
  • Oh and `yab.loaded` is a promise that is resolved once the window is loaded. Equivalent to `$(window).load(function() { // ... });` – Skone Feb 20 '14 at 01:16
-3

I think the easiest way would be to trick the browser into a reload that it thinks is a new page.

window.location = window.location

All the browsers I've tested this in it works consistently. I would personally stay away from onload callbacks as they can cause jumps during load that aren't too visually appealing.

Keith Sunshine Perfetti
  • 1
  • 1