如何使用JavaScript防止浏览器在重新加载页面时自动滚动？

Question

如今，大多数浏览器在页面刷新时会自动重新定位窗口滚动条，这通常很好，但我有一个情况，需要重新加载页面并将焦点放在用户离开的页面的不同部分。注意新元素以隐藏状态开始，因此哈希标记无法使用。我需要在JS中处理它，以便我可以使div可见，还有其他一些事情。

重新加载后调用...

$(document).ready(function(){
    $('#mydiv').show();
    var top = $('#myelement').offset().top;
    window.scrollTo(0, top);
});

尽管如此，该页面关注用户离开页面的位置。经过大量调试，我认为代码运行良好，但是浏览器处理重新加载事件之后，它似乎在重新定位我的新定位滚动条... 它发生得很快，但如果我在滚动后放置一个警报，它会显示正确的屏幕位置。在关闭警报后，浏览器将滚动条跳回到它认为应该在的位置（至少在Chrome中是这样）。

我的问题是，有没有办法防止浏览器（跨浏览器）处理重新加载事件？使用超时延迟我的滚动似乎可以解决问题，但看起来非常不专业和抖动。

我已经尝试过

    $(document).unbind("scroll"); 

我在这里看到有人推荐，但它并没有起作用。

提前感谢您的任何帮助。

- dgeare

Answer 1

以下是适用于Firefox（18）、Chrome（24）和IE（9）的解决方案。

将以下内容放入文档头部的脚本中：

function autoScroll() {
    var div = document.getElementById("mydiv");
    div.style.display = '';
    var top = div.offsetTop;
    if(window.scrollTop != top) 
        window.scrollTo(0, top);
}
function loadAutoScroll() {
    autoScroll();
    window.onload = null;
    return false;
}
function scrollAutoScroll() {
    autoScroll();
    window.setTimeout(function(){ window.onscroll = null; }, 100);
    return false;
}
window.onload = loadAutoScroll;
window.onscroll = scrollAutoScroll;

我相信可以得出更简洁的解决方案。

- Louis Ricci

---

它运行正常。非常感谢您的努力。^_^ - dgeare

Answer 2

在您的页面头部添加此代码。

<style>
    body{
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
</style>
<script>
    window.onload = function () {
      jQuery('body').css({'overflow': 'auto', 'position': 'static'});
      window.scrollTo(0, 0);
    };
</script>

- screamzt