javascript - 如何使用 cferdinandi/smooth-scroll 不在 URL 中显示#id

Question

我正在使用 cferdinandi 的 smooth-scroll 包，但无法弄清楚如何使用不同的选择器而不是 ID，因此它不会显示在 URL 中。例如，

我想要的:example.com ，不是:example.com/#1

我所做的是插入一个 id到 div我想滚动到并放置相同的 id在href的 <a>元素。

<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth- scroll@15.0.0/dist/smooth-scroll.polyfills.min.js"></script>
<script>
  const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 800
  });
</script>

...
<a href="#1">About</a>
...


...
<section id="1">
  This is section about
</section>
...

它有这个功能，只是我试图通过不显示 id 来使 URL 更好看。

Answer 1

我不知道为什么 anchor url 这么困扰你。当人们想要在您的网站上分享特定内容时，这会很有帮助。

但是如果你真的想要一个干净的方法来做到这一点，试试这个方法:

function goto(id) {
  document.getElementById(id).scrollIntoView();
}

html {
  /* You don't need any library to achieve smooth scroll */
  scroll-behavior: smooth;
}

<!-- polyfill for scroll-behavior: smooth; -->
<script src="https://cdn.jsdelivr.net/npm/scroll-behavior-polyfill@2/dist/index.min.js"></script>

<a href="javascript: void(0)" onclick="goto('1')">Go to 1</a>
<a href="javascript: void(0)" onclick="goto('2')">Go to 2</a>
<a href="javascript: void(0)" onclick="goto('3')">Go to 3</a>
<a href="javascript: void(0)" onclick="goto('4')">Go to 4</a>
<a href="javascript: void(0)" onclick="goto('5')">Go to 5</a>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<label id="1">One</label>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<label id="2">Two</label>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<label id="3">Three</label>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<label id="4">Four</label>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<label id="5">Five</label>