Is there a way to disable the behavior where some modern browsers (Chrome and Safari) remember your scroll position on a page refresh?
3
-
Why would you want to do that? It is good user experience to go back to that position.putvande– putvande2013-09-04 15:08:12 +00:00Commented Sep 4, 2013 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– Anthony2013-09-04 15:11:39 +00:00Commented Sep 4, 2013 at 15:11
-
2Any page that uses infinite scroll for the loading experience will have this (unexpected) problem.arxpoetica– arxpoetica2014-11-24 17:40:58 +00:00Commented Nov 24, 2014 at 17:40
Add a comment
|
6 Answers
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
3 Comments
Neil Monroe
Since this is still an experimental property, does anyone know browser support?
cs95
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...
Nathalia Xavier
It's supported by most browsers developer.mozilla.org/en-US/docs/Web/API/History/…
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
Comments
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.
1 Comment
Anthony
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.
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();
}
}
Comments
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);
});
1 Comment
Skone
Oh and
yab.loaded is a promise that is resolved once the window is loaded. Equivalent to $(window).load(function() { // ... });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.
Comments
