jQuery Javascript scrollTop not working as expected on Chrome to restore scrollbar position

Question

I'm using the following jQuery Javascript to save the scrollbar position before the unload event and reapply it again:

$(document).ready(function () {
    document.documentElement.scrollTop = $.cookie("scroll") || 0;
});

window.onbeforeunload = function () {
    $.cookie("scroll", document.documentElement.scrollTop, { expires: 7 });
}

Basically I have a series of links that refresh the page and I would like the browser to restore the scrollbar position. Note I cannot use AJAX in this instance. It works a treat in Firefox. In Chrome and Safari however it only works when the browser window is refreshed, and not when the link is clicked to refresh the page. It's as if clicking the link isn't being recognised as onbeforeunload.

I have tried to modify the code to set the scroll cookie using a click event as follows with no luck:

$(document).ready(function () {
    document.documentElement.scrollTop = $.cookie("scroll") || 0;
});

$('a.lockscrollbar').click(function() {
    $.cookie("scroll", document.documentElement.scrollTop, { expires: 7 });
}

FYI I'm using jQuery 1.4.2 with the jQuery cookie plugin.

Any ideas?

You can see a demo of the problem at buyometric.co.uk/test.php. If you click any of the "4" links in Chrome you are returned to the top of the page. If you refresh the browser, the scrollbar position is recalled — Paul, Oct 06 '10 at 12:33

score 2 · Answer 1 · answered Jul 24 '12 at 17:41

2

This is an older post but I was having the same issue with Chrome 20. Using jQuery 1.7.1 this worked for me:

$(window).on('load', function(){
    $('html body').scrollTop(0);
});

answered Jul 24 '12 at 17:41

Ghostrydr

752
5
14

score 1 · Answer 2 · answered Mar 22 '11 at 15:27

1

Before Chrome 10 this use to work like a charm... now it seem to only work in Firefox (Anyone have tested in IE9 ?)

var y = $(window).scrollTop();
$('html, body').animate({scrollTop:(y + 50)}, 1000);

answered Mar 22 '11 at 15:27

molokoloco

4,504
2
33
27

I can't get this to work with Chrome 12, it works in Safari though. – Gourneau Jul 04 '11 at 00:26
OK i found a FIX http://jsfiddle.net/molokoloco/uCrLa/ 'html' or 'body' for setter (depend on browser)... 'window' for getter... – molokoloco Nov 08 '11 at 17:14
modified version of this worked for me on Chrome 52.0.2743.116 and FF48: var y = $(window).scrollTop(); $('html, body').animate({scrollTop:0}, 'slow'); – mrtipale Sep 28 '16 at 13:53

score 0 · Answer 3 · edited May 23 '17 at 12:15

0

Scrolling the <body> in Chrome and Safari doesn't work very well, or possibly at all. I don't know why but I once had a similar problem and I fixed it by using a <div> nested inside the <body>.

edited May 23 '17 at 12:15

Community

1
1

answered Oct 06 '10 at 12:39

Pointy

405,095
59
585
614

It's odd that it works perfectly when refreshing the window, but not following a link. I'm starting to think that in this instance it's a problem with onbeforeunload and not ScrollTop. – Paul Oct 06 '10 at 12:45
Well, investigate to your heart's content, but you might want to see if wrapping all your page content in another `
`, and then scrolling that instead of the ``, makes a difference.
– Pointy Oct 06 '10 at 12:57

score 0 · Answer 4 · edited Aug 05 '12 at 04:17

This is the code I use (tho the site I'm working on is still in build stage, but this works):

$(document).ready(function(){
    $(window).scroll(function(){
        var posY = $(document).scrollTop();
        $('#trigger').click(function(){
            if($.browser.webkit){
                $('body').stop().animate({scrollTop:0},'slow');
            }else{
                $('html').stop().animate({scrollTop:0},'slow');
            }
        });
    });
});

Webkit won't scroll to the top when the object being scrolled is 'html', so first I check for browser type (and before you say it I know jQuery.support would be better - like I said still in build stage). Browsers other than webkit accept the 'html' selector, so I use that for all other browsers (annoyingly, using 'html' works in Opera but not Chrome, and using 'body' works in Chrome but not Opera...!).

jQuery Javascript scrollTop not working as expected on Chrome to restore scrollbar position

4 Answers4

Linked