Javascript 防止刷新时自动滚动浏览器

如果您转到页面a并四处滚动，则刷新页面将在您离开页面的位置刷新。这很好，但是这也发生在url中有锚位置的页面上。例如，如果单击链接

http://example.com/post/244#comment5

并在环顾四周后刷新页面，您将不会处于锚定位置，页面将跳转。有没有办法用javascript来防止这种情况？因此，无论发生什么，您都可以导航到锚点。

您应该能够

Onload，检查

window.location.hash

是否有值。如果是，则获取id与哈希值匹配的元素。找到元素的位置（对offsetTop/offsetLeft的递归调用），然后将这些值传递到

窗口。scrollTo（x，y）

方法

---

这会将页面滚动到所需的元素。

由于浏览器行为发生变化，不再建议使用此解决方案。请参阅其他答案

基本上，如果使用锚点，我们将绑定到windows scroll事件。其思想是，第一个滚动事件必须属于浏览器完成的自动重新定位。发生这种情况时，我们自行重新定位，然后删除绑定事件。这样可以防止后续页面滚动损坏系统

$(document).ready(function() {
    if (window.location.hash) { 
        //bind to scroll function
        $(document).scroll( function() {
            var hash = window.location.hash
            var hashName = hash.substring(1, hash.length);
            var element;

            //if element has this id then scroll to it
            if ($(hash).length != 0) {
                element = $(hash);
            }
            //catch cases of links that use anchor name
            else if ($('a[name="' + hashName + '"]').length != 0)
            {
                //just use the first one in case there are multiples
                element = $('a[name="' + hashName + '"]:first');
            }

            //if we have a target then go to it
            if (element != undefined) {
                window.scrollTo(0, element.position().top);
            }
            //unbind the scroll event
            $(document).unbind("scroll");
        });
    }

});

---

在Chrome上，即使强制scrollTop为0，它也会在第一次滚动事件之后跳转

您应该将滚动条绑定到以下位置：

$(window).on('beforeunload', function() {
    $(window).scrollTop(0);
});

---

因此，浏览器被欺骗，认为它在刷新之前就已经开始了。

这里有一个更通用的方法。我没有试图阻止浏览器滚动（或者跳到顶部，就像它看起来一样），而是恢复页面上的前一个位置。 即，我正在本地存储中记录页面的当前y偏移量，并在页面加载后滚动到此位置

function storePagePosition() {
  var page_y = window.pageYOffset;
  localStorage.setItem("page_y", page_y);
}


window.addEventListener("scroll", storePagePosition);


var currentPageY;

try {
  currentPageY = localStorage.getItem("page_y");

  if (currentPageY === undefined) {
    localStorage.setItem("page_y") = 0;
  }

  window.scrollTo( 0, currentPageY );
} catch (e) {
    // no localStorage available
}

---

经过多次失败，我终于成功了。在这里是正确的，因为当用户重新加载页面或单击链接时，在卸载之前使用

将使页面跳转到顶部。因此，
unload
显然是实现这一点的方法

$(window).on('unload', function() {
   $(window).scrollTop(0);
});

方式（谢谢）：

编辑：2015年7月16日

Firefox的跳转问题仍然存在，即使有
卸载
事件。
您只需在末尾添加一个#，页面就会在顶部加载

适用于所有浏览器，移动和桌面，因为它非常简单

$(document).ready(function() {
var url = window.location.href;
console.log(url);
if( url.indexOf('#') < 0 ) {
    window.location.replace(url + "#");
} else {
    window.location.replace(url);
}

$（文档）.ready（函数（）{
var url=window.location.href；
console.log（url）；
if（url.indexOf（“#”）<0{
window.location.replace（url+“#”）；
}否则{
window.location.replace（url）；
}

}))

//这将在页面末尾加载一个#。
要禁用自动滚动恢复，只需将此标记添加到页眉部分即可

<script>history.scrollRestoration = "manual"</script>

history.scrollRestoration=“手动”

IE不支持它。
这对我有用

//重置滚动顶部
history.scroll=“手动”
$（窗口）.on（'beforeunload'，function（））{
$（窗口）.scrollTop（0）；
});
jQuery解决方案可以吗？还是您想要纯js？我想应该考虑的一个用例是，如果用户在自动滚动之前滚动页面。我记得，自动滚动只有在页面完全加载后才会发生。如果用户在之前滚动，则自动滚动将被取消。因此，您需要某种方法来区分用户启动的滚动和浏览器启动的滚动。我不知道怎么做，但我记得这是可能的。哇！这是一个有趣的深夜问题。我告诉我的老板，当我在桌子上睡着的时候，这是你的错。我只是做了一个快速更改来删除return语句。这干扰了我为scroll事件添加的解除绑定功能。最初，我在一个小的基本示例文件中使用了这个功能来检查它。一旦我确认它确实有效，我就对它在我的项目中如何不起作用感到困惑。通过消除过程，我在css文件中找到了一个导致它出错的样式声明。这是外部字体的应用。我将您的代码包装在一个函数中，现在将其传递到doc.ready处理程序中的$（window）.load（）处理程序中。它现在可以工作了（初始页面有轻微的闪烁）。谢谢你的代码！让我知道这是否是一个可靠的修复。如果你的内容在页面加载后加载，它将不起作用；例如：有两个div将由ajax填充横幅。@FlashThunder-您能定义“不工作”吗？发布一条控制台消息？如果你不想在滚动上乱动，那么比公认的答案更有用。这在Chrome33中不起作用。我的意思是，在加载新页面之前，它确实会滚动到顶部。然而，浏览器仍然记得以前的滚动位置，并执行相同的自动滚动到该位置。在Chrome36、Firefox30和IE11上测试。效果很好！对于非jQuery实现：
window.onbeforeunload=function（）{window.scrollTo（0,0）；}
为什么选择“beforeunload”事件而不是“unload”。我的测试表明，最后一个允许在页面真正被浏览器卸载之前避免跳转到顶部。这并没有阻止浏览器进行自动滚动。这就是问题所在。此解决方案比卸载前的
解决方案好得多，因为它可以防止在重新加载和锚定单击时跳到页面顶部。@BradGreens使用现代Chrome，当用户切换到其他选项卡时，也会触发onunload事件，这是意外的。onbeforeunload仍然是有效的解决方法。@TelvinNguyen您能提供有关这方面的任何资源吗？我在google chrome 72上测试了这个功能，仍然可以正常工作。@JanakaDombawela我所说的：移动新标签会导致问题是不正确的。但是，您可以看到本例中的onunload事件没有正确触发，即使使用jQuery 1.9.1和jQuery 1.8.3。onunload是不可靠的。(
<script>history.scrollRestoration = "manual"</script>