如何防止浏览器在使用 javascript 重新加载时自动滚动？ [复制]答案

【问题标题】：how to prevent browsers auto scroll on reload with javascript? [duplicate]如何防止浏览器在使用 javascript 重新加载时自动滚动？ [复制]
【发布时间】：2023-03-23 10:11:02
【问题描述】：

所以，现在大多数浏览器会在页面刷新时自动重新定位窗口滚动，这通常很好，但我有一种情况，我需要重新加载页面并关注页面的与用户离开的不同部分。注意获得焦点的新元素一开始是隐藏的，所以哈希不起作用。我需要在 JS 中处理它，这样我才能使 div 可见。

重新加载后调用...

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

不过，页面关注的是用户离开页面的位置。经过多次调试，在我看来代码运行得很好，但是浏览器在我处理 reload 事件之后正在处理，并重新定位我新定位的滚动......它会立即发生，但如果我在之后发出警报我的滚动，它显示了正确的屏幕位置。解除警报后，浏览器会将滚动条跳回到 IT 认为应该在的位置（至少在 Chrome 中是这样）。

我的问题，有没有办法阻止浏览器（跨浏览器）处理重载事件？用超时延迟我的滚动似乎有效，但它看起来非常不专业和跳跃。

我试过了

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

正如我在这里看到的某处推荐的那样，但它没有做任何事情。

在此先感谢您的帮助。

【问题讨论】：

标签： javascript scroll reload

【解决方案1】：

这是一个适用于 FF (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;

我确信可以得出更清洁的解决方案。

【讨论】：

它有效。非常感谢你的努力。 ^_^

【解决方案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>

【讨论】：