使用svelte-spa-router时，如何在HTML中实现默认书签锚点跳转？

因为svelte-spa-router会劫持所有带#的链接作为hash路由处理，导致原生锚点滚动失效，你可以通过以下几种方式恢复默认行为：

方法一：手动处理锚点点击事件 #

给页面内锚点添加自定义点击逻辑，阻止路由劫持并触发滚动：

<script>
function handleAnchorClick(e) {
  e.preventDefault();
  const targetId = e.currentTarget.href.split('#')[1];
  const targetEl = document.getElementById(targetId);
  
  if (targetEl) {
    // 可选：开启平滑滚动
    targetEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
    // 更新URL的hash（不触发路由跳转）
    window.history.replaceState({}, '', `#${targetId}`);
  }
}
</script>

<!-- 使用示例 -->
<a href="#about" on:click={handleAnchorClick}>跳转到关于区域</a>

<div id="about">
  <!-- 关于区域内容 -->
</div>

方法二：通过路由全局钩子拦截 #

利用svelte-spa-router提供的beforeNavigate钩子，全局判断并处理页面内锚点：

import { beforeNavigate } from 'svelte-spa-router';

// 全局注册路由前置钩子
beforeNavigate((detail) => {
  const hash = detail.location.hash;
  if (!hash) return;

  const targetId = hash.slice(1);
  const targetEl = document.getElementById(targetId);
  
  // 如果目标元素存在，说明是页面内锚点，阻止路由跳转并执行滚动
  if (targetEl) {
    detail.cancel();
    targetEl.scrollIntoView({ behavior: 'smooth' });
    window.history.pushState({}, '', hash);
  }
});

这种方式不需要修改每个锚点的代码，适合全局统一处理。

方法三：同页面内锚点直接绑定元素 #

如果锚点和目标区域在同一个组件内，可以直接绑定元素引用，跳过URL hash操作：

<script>
let aboutSection;
</script>

<button on:click={() => aboutSection.scrollIntoView({ behavior: 'smooth' })}>
  查看关于我们
</button>

<div id="about" bind:this={aboutSection}>
  <!-- 关于我们的内容 -->
</div>

这种方式更轻量化，适合单组件内的锚点跳转需求。

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