SvelteKit中哈希锚点深度链接时滚动位置异常问题

• DOM元素尚未加载完成
  客户端路由跳转（CSR）时，页面组件是逐步渲染的。如果目标区块依赖异步数据加载、组件懒加载，或者需要等待DOM更新完成，浏览器尝试滚动时#section-name对应的元素还不存在，自然无法定位到正确位置。而SSR模式下，页面在服务端已经渲染好完整DOM，浏览器加载后能直接找到锚点元素并滚动。

• 滚动触发时机不匹配
  SvelteKit的客户端路由默认的滚动处理逻辑，可能在页面组件还没完成挂载或渲染时就执行了锚点滚动。此时元素的位置还没被正确计算，导致滚动位置异常。而刷新/直接访问URL时，浏览器会在整个页面资源加载完成后再处理hash锚点，时机更晚更准确。

• 动态内容或异步渲染延迟
  如果详情页的目标区块包含动态生成的内容（比如从API获取数据后渲染的列表、组件），CSR跳转时数据请求是在客户端发起的，数据返回和渲染完成的时间晚于路由跳转后的滚动触发时机。这时候滚动操作找不到目标元素，只能停留在页面顶部或错误位置。

• CSS动画/过渡影响元素位置
  如果目标区块或其父元素存在CSS过渡、动画，或者有延迟渲染的逻辑，在CSR跳转后，元素的位置还处于变化过程中，浏览器计算的滚动位置会基于未稳定的元素布局，导致最终滚动结果不符合预期。而SSR模式下，元素布局在页面加载时已经稳定，滚动不会受动画影响。

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