jQuery Javascript scrollTop not working as expected on Chrome to restore scrollbar position
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.
开发者_Go百科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?
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);
});
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...!).
加载中,请稍侯......
精彩评论