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?
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?
Share asked Oct 6, 2010 at 12:26 PaulPaul 6714 gold badges12 silver badges22 bronze badges 1- 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 Commented Oct 6, 2010 at 12:33
4 Answers
Reset to default 2This 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);
});
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);
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>.
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...!).