使用page.js路由的Svelte应用中锚点链接跨页跳转失效问题求助

你的问题出在单页应用路由切换时，浏览器不会自动处理URL中的hash——因为页面没有刷新，所以跨页面跳转或直接输入带锚点的URL时，不会自动滚动到目标位置。以下是具体修复步骤：

1. 在页面组件中添加锚点滚动逻辑 #

利用Svelte的生命周期钩子和page.js的路由监听，在路由加载完成后检查URL的hash并滚动：

<script>
  import { onMount, onDestroy } from 'svelte';
  import page from 'page';

  // 处理hash滚动的通用函数
  function scrollToHash() {
    const hash = window.location.hash;
    if (!hash) return;

    const targetEl = document.querySelector(hash);
    if (targetEl) {
      targetEl.scrollIntoView({ behavior: 'smooth' });
    }
  }

  onMount(() => {
    // 页面首次加载时检查hash
    scrollToHash();
    // 监听所有路由变化，切换后自动处理hash
    const unlisten = page('*', scrollToHash);
    return unlisten; // 组件销毁时移除监听
  });

  // 保留原页面内锚点点击处理（可优化）
  function handleAnchorClick({ target }) {
    const hash = target.getAttribute('href');
    const targetEl = document.querySelector(hash);
    if (!targetEl) return;

    // 手动更新URL hash，确保刷新页面也能定位
    window.history.pushState({}, '', hash);
    targetEl.scrollIntoView({ behavior: 'smooth' });
  }
</script>

<nav>
  <a href="#here" on:click|preventDefault={handleAnchorClick}>go to anchor</a>
</nav>

<main>
  <section id="section-1">
    ... lots of lorem ipsum ...
  </section>
  <section>
    <h2 id="here">anchor</h2>
  </section>
</main>

2. 跨页面锚点链接写法 #

其他页面跳转到该页面锚点时，直接写完整路由路径加hash：

<a href="/your-target-page#here">跳转到目标页面的锚点</a>

核心原因说明 #

• 页面内点击你用了preventDefault阻止了浏览器默认行为，手动实现了滚动，所以正常。
• 跨页面路由切换是客户端行为，页面未刷新，浏览器不会自动触发hash对应的滚动逻辑，必须手动监听路由完成事件并执行滚动。

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