JavaScript锚点失效：页面重载后无法滚动至指定区块问题

问题根源 #

1. DOM元素未就绪：useEffect在组件挂载时立即执行，此时锚点对应的DOM元素可能还没被React渲染完成，导致document.getElementById(id)返回null，无法触发滚动。
2. Hash操作冲突：先清空window.location.hash再重新设置，会触发浏览器两次滚动行为——清空hash会强制回到顶部，后续设置hash时如果元素未就绪，滚动操作失效，最终停在顶部。
3. 页面布局变化：页面完全加载后（比如图片、异步组件加载完成），页面高度发生变化，浏览器会重新计算滚动位置，导致回到顶部。

修复方案 #

方案1：使用scrollIntoView替代Hash操作，等待页面完全加载

修改Hook，改用element.scrollIntoView()实现滚动，并监听页面load事件确保所有资源加载完毕：

import React from 'react';

const useScrollToLocation = () => {
    React.useEffect(() => {
        const scrollToAnchor = () => {
            const hash = window.location.hash;
            if (!hash) return;

            const id = hash.replace('#', '');
            const element = document.getElementById(id);
            
            if (element) {
                // 直接滚动到目标元素，避免Hash操作的冲突
                element.scrollIntoView({
                    behavior: 'smooth', // 可选，开启平滑滚动
                    block: 'start' // 元素顶部与视口顶部对齐
                });
            }
        };

        // 页面所有资源加载完成后执行
        window.addEventListener('load', scrollToAnchor);
        // 组件挂载后立即执行一次（确保DOM已渲染）
        scrollToAnchor();

        // 清理事件监听
        return () => {
            window.removeEventListener('load', scrollToAnchor);
        };
    }, []);
};

export default useScrollToLocation;

方案2：适配路由/异步组件场景

如果锚点元素在路由组件或异步加载的组件中，需要监听Hash变化并等待DOM更新完成：

import React from 'react';
import { useLocation } from 'react-router-dom';

const useScrollToLocation = () => {
    const location = useLocation();

    React.useEffect(() => {
        const scrollToAnchor = () => {
            const hash = location.hash;
            if (!hash) return;

            const id = hash.replace('#', '');
            const element = document.getElementById(id);
            
            if (element) {
                element.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        };

        // 短延迟确保React已完成DOM渲染
        const timer = setTimeout(scrollToAnchor, 100);

        return () => clearTimeout(timer);
    }, [location.hash]); // Hash变化时重新执行滚动逻辑
};

export default useScrollToLocation;

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