Question

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

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

我所做的是在要滚动到的id上插入div，并将相同的id放在href的{{1}}元素中。

<a>

它具有功能，只是我试图通过不显示ID来使URL更好。

Answer 1

我不知道为什么锚网址这么困扰您。当人们想要在您的网站上共享特定内容时，这很有用。

但是，如果您真的想要一种干净的方法，请尝试以下方法：

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>

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

1 个答案: