使用 page.js 路由在 Svelte 应用程序中锚定链接

Question

我的 Svelte 应用程序的页面上有一个锚标记。指向锚点的链接在页面本身上有效，但我无法从另一个页面链接到锚点。当我输入带有锚点的 URL 时，页面不会向下滚动。我需要能够给人们一个链接，让他们转到页面的特定部分。

相关代码如下：

    <script>
      function scrollIntoView({ target }) {
        const el = document.querySelector(target.getAttribute("href"));
        if (!el) return;
        el.scrollIntoView({
          behavior: "smooth",
        });
      }
    </script>

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

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

我这里有一个 REPL：https://svelte.dev/repl/e651218bdb47455d9cafe8bff27c8d7b?version=3.24.0

我正在使用 page.js 路由到组件——我没有在 文档 中找到任何关于定位锚标记的具体信息。

任何帮助将不胜感激。

Answer 1

平滑滚动不需要 JS，只需添加一些 CSS：

/* :global if in component */
:global(html) {
    scroll-behavior: smooth;
}

REPL

至于页面加载时的滚动，那是客户端渲染的问题。对于 SSR，CSS 单独处理所有事情，但如果在页面加载后添加应该滚动到的元素，滚动将不会发生。

处理这个问题的一种方法是添加一个

onMount

，理想情况下在组件层次结构中处于较高位置，以便在安装所有内容后触发，手动执行滚动：

onMount(() => {
  const { hash } = document.location;
  const scrollTo = hash && document.getElementById(hash.slice(1));
  if (scrollTo)
    scrollTo.scrollIntoView();
});

（其中一些逻辑来自 SvelteKit，它会自动执行所有这些操作。）

Answer 2

看起来唯一的其他答案解决了原来的问题。这是我在这里的第一篇文章，所以如果这是不礼貌的，请原谅我，但我在这里遇到了同样的一般问题（跨页锚链接没有滚动到他们的 id'ed 元素）但是由于不同的机制，所以我'我把这篇文章发给下一个最终阅读这篇文章的人，以防他们的问题原因与我的相符。

使用 CSS 设置我的滚动行为，并仅使用元素的 href 属性设置跨页锚链接，我遇到的问题是我会单击跨页锚链接，并且在到达目标页面后，窗口会滚动几个像素然后挂断。

我尝试了各种 Svelte 和 JS 解决方法，尽管将关键变量记录到控制台显示相关数据正在按预期更改，但错误的行为仍然存在。

就我而言，问题原来是，在跨页锚链接的目标页面上，我正在跟踪垂直滚动...

svelte:window(bind:scrollY)

那是 Pug 语法，但你明白了。

去掉那个特殊元素（当然还有所有相关代码）不会破坏跨页锚链接。把它带回来再次打破了他们。到目前为止，在几天的时间里，我重新测试了这个观察结果，它是一对一的。

我不了解更深层次的机制，但我相当有信心这个垂直滚动绑定到 svelte:window 元素是孤立的 x 因素，因为我找到了一个使用 vanilla JS 的解决方法来完成我对绑定所做的事情，并且跨页锚链接仍然适用于适当的解决方法。