Firefox滚动至页面顶部异常：与页面内容量相关的技术问询

问题描述 #

我有一个单页HTML网站，所有“页面”通过状态切换实现——仅显示当前状态内容、隐藏其余内容，页脚在所有页面状态下可见且内容一致，其中包含指向Rules页面状态的链接。预期行为是无论处于哪个页面状态，点击该链接都应跳转到Rules页面顶部，但从某一特定页面点击时，会跳转到Rules页面末尾。此异常仅在Firefox中出现，Chrome和Edge的桌面及移动端版本均无此问题。

现有代码 #

/** Moves browser to the Governance page and scrolls to the top of the page
*/
const switchToRulesPage = () => 
{
    if ('scrollRestoration' in history)         
    {
        history.scrollRestoration = 'manual';                                                                           
    }   

    window.scrollTo(0,0);                                                                                               

    switchPage('about-link', 'governance-cont', false);                                                                                     
}

已尝试操作 #

• 调整代码执行顺序，先切换页面状态再调用window.scrollTo(0,0)，浏览器行为无变化
• 通过W3C Validator消除了HTML页面的所有错误

解决方案 #

1. 延迟滚动操作，等待页面布局重排完成 #

Firefox可能在页面元素显示/隐藏的布局重排完成前就执行了滚动，导致滚动位置被后续布局变化覆盖。可以借助requestAnimationFrame等待下一帧再执行滚动，确保页面状态切换完成：

const switchToRulesPage = () => 
{
    if ('scrollRestoration' in history)         
    {
        history.scrollRestoration = 'manual';                                                                           
    }   

    switchPage('about-link', 'governance-cont', false);
    // 等待页面布局更新后再执行滚动
    requestAnimationFrame(() => {
        window.scrollTo({
            top: 0,
            behavior: 'instant' // 强制立即滚动，避免动画干扰
        });
    });
}

2. 直接操作Rules容器的滚动位置（针对容器内滚动场景） #

如果Rules页面内容是在某个可滚动容器内（而非整个窗口），需要同时设置容器和窗口的滚动位置：

const switchToRulesPage = () => 
{
    if ('scrollRestoration' in history)         
    {
        history.scrollRestoration = 'manual';                                                                           
    }   

    switchPage('about-link', 'governance-cont', false);
    
    requestAnimationFrame(() => {
        // 滚动Rules容器到顶部
        const rulesContainer = document.getElementById('governance-cont');
        if (rulesContainer) rulesContainer.scrollTop = 0;
        // 同时确保窗口滚动到顶部
        window.scrollTo(0, 0);
    });
}

3. 配合阻止链接默认行为+双重滚动保险 #

如果页脚的Rules链接是<a>标签，先阻止其默认跳转行为，再通过延迟滚动做双重保险：

<!-- 修改页脚链接，阻止默认行为 -->
<a href="#" onclick="switchToRulesPage(); return false;">Rules</a>

const switchToRulesPage = () => 
{
    history.scrollRestoration = 'manual';
    // 立即执行一次滚动
    window.scrollTo(0, 0);

    switchPage('about-link', 'governance-cont', false);
    
    // 100ms后再次强制滚动，覆盖Firefox可能的自动恢复行为
    setTimeout(() => {
        window.scrollTo(0, 0);
    }, 100);
}

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