如何避免.NET Razor页面使用scrollTo时先滚动到顶部再定位？

在.NET Razor页面中，我编写了以下代码，意图在用户离开页面时存储滚动位置，返回页面时恢复到该位置。但页面加载时总会先滚动到顶部，再定位到保存的位置，产生不必要的抖动。

原代码：

//store scroll position before leave page
window.addEventListener('beforeunload', function (event) {
    sessionStorage.setItem('scrollPosition', window.scrollY);
});

//scroll to saved position
document.addEventListener('DOMContentLoaded', function (event) {
    var scrollPosition = parseInt(sessionStorage.getItem('scrollPosition') || '0', 10);
    window.scrollTo(0, scrollPosition);
});

出现抖动的核心原因是代码执行时机太晚：DOMContentLoaded事件触发时，页面已经完成初始渲染，浏览器默认会将滚动位置重置到顶部，之后我们的代码再执行滚动操作，就会产生跳转感。同时浏览器自带的自动滚动恢复机制可能和自定义逻辑冲突，加剧问题。

可以通过以下两步解决：

1. 禁用浏览器自动滚动恢复，避免默认行为干扰自定义逻辑
2. 提前滚动恢复的执行时机，在页面开始渲染但未完成初始滚动时就执行

修改后的代码：

// 禁用浏览器自动滚动恢复，避免默认行为冲突
history.scrollRestoration = 'manual';

// 离开页面时存储滚动位置
window.addEventListener('beforeunload', function () {
    sessionStorage.setItem('scrollPosition', window.scrollY);
});

// 在文档进入交互状态时（更早的时机）恢复滚动位置
document.addEventListener('readystatechange', function () {
    if (document.readyState === 'interactive') {
        const scrollPosition = parseInt(sessionStorage.getItem('scrollPosition') || '0', 10);
        window.scrollTo(0, scrollPosition);
    }
});

另外，还可以进一步优化：将这段代码放在页面的<head>标签内（无需等待DOM加载完成），这样能确保滚动恢复逻辑在页面开始渲染前就执行，彻底消除抖动：

<head>
    <!-- 其他head内容 -->
    <script>
        history.scrollRestoration = 'manual';
        const scrollPosition = parseInt(sessionStorage.getItem('scrollPosition') || '0', 10);
        // 直接设置滚动位置，无需等待事件
        window.scrollTo(0, scrollPosition);

        window.addEventListener('beforeunload', function () {
            sessionStorage.setItem('scrollPosition', window.scrollY);
        });
    </script>
</head>

补充说明 #

• history.scrollRestoration = 'manual'：告诉浏览器不要自动恢复滚动位置，完全由自定义逻辑控制
• document.readyState === 'interactive'：此时文档已加载完成并可以交互，但子资源（如图片）可能还未加载，这个时机比DOMContentLoaded更早，能避免初始滚动到顶部的行为
• 将代码放在<head>中：是最早能执行JavaScript的时机，此时页面还未开始渲染，设置滚动位置不会产生视觉抖动

内容的提问来源于stack exchange，提问作者Bigbob23