jQuery Javascript scrollTop 在 Chrome 上无法正常工作以恢复滚动条位置答案

【问题标题】：jQuery Javascript scrollTop not working as expected on Chrome to restore scrollbar positionjQuery Javascript scrollTop 在 Chrome 上无法正常工作以恢复滚动条位置
【发布时间】：2012-10-05 00:37:17
【问题描述】：

我正在使用以下 jQuery Javascript 在卸载事件之前保存滚动条位置并再次重新应用它：

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

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

基本上我有一系列刷新页面的链接，我希望浏览器恢复滚动条位置。注意我不能在这种情况下使用 AJAX。它在 Firefox 中是一种享受。然而，在 Chrome 和 Safari 中，它仅在刷新浏览器窗口时有效，而不是在单击链接刷新页面时有效。好像点击链接没有被识别为onbeforeunload。

我尝试修改代码以使用点击事件设置滚动cookie，但没有成功：

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

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

仅供参考，我正在使用带有 jQuery cookie 插件的 jQuery 1.4.2。

有什么想法吗？

【问题讨论】：

您可以在 buyometric.co.uk/test.php 上查看该问题的演示。如果您单击 Chrome 中的任何“4”链接，您将返回页面顶部。如果刷新浏览器，滚动条位置会被召回

标签： javascript jquery

【解决方案1】：

这是一篇较旧的帖子，但我在 Chrome 20 上遇到了同样的问题。使用 jQuery 1.7.1 这对我有用：

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

【讨论】：

【解决方案2】：

在 Chrome 10 之前，这种使用就像一个魅力......现在它似乎只在 Firefox 中工作（有人在 IE9 中测试过吗？）

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

【讨论】：

我无法让它与 Chrome 12 一起使用，但它可以在 Safari 中使用。
好的，我找到了一个 FIX jsfiddle.net/molokoloco/uCrLa 'html' 或 'body' 用于 setter（取决于浏览器）... 'window' 用于 getter...
修改后的版本在 Chrome 52.0.2743.116 和 FF48 上对我有用： var y = $(window).scrollTop(); $('html, body').animate({scrollTop:0}, 'slow');

【解决方案3】：

在 Chrome 和 Safari 中滚动 <body> 效果不佳，或者根本无法滚动。我不知道为什么，但I once had a similar problem 并通过使用嵌套在<body> 中的<div> 来修复它。

【讨论】：

刷新窗口时它可以完美运行，但没有跟随链接，这很奇怪。我开始认为在这种情况下，onbeforeunload 有问题，而不是 ScrollTop。
好吧，调查一下你的内心，但你可能想看看是否将所有页面内容包装在另一个 <div> 中，然后滚动它而不是 <body>，会有所不同。

【解决方案4】：

这是我使用的代码（虽然我正在开发的网站仍处于构建阶段，但它有效）：

$(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');
            }
        });
    });
});

当滚动的对象是“html”时，Webkit 不会滚动到顶部，所以首先我检查浏览器类型（在你说之前我知道 jQuery.support 会更好——就像我说的还在构建阶段）。 webkit 以外的浏览器接受 'html' 选择器，所以我将它用于所有其他浏览器（令人讨厌的是，使用 'html' 在 Opera 中有效，但在 Chrome 中无效，在 Chrome 中使用 'body' 在 Chrome 中有效，但在 Opera 中无效......！）。

【讨论】：