有没有一种方法可以滚动到URI片段而不将其添加到历史记录中

Question

我正在构建的应用程序中有一些URI片段，这些片段将按预期跳转到页面中的元素，然而，单击这些片段链接也会将它们添加到历史记录中，因此如果我导航到另一个页面并单击返回，当我不想让片段修改历史时，它将导航到最后一页和最后一次使用的片段，所以点击返回只会将我带到上一页的顶部，而不会自动滚动到最后一个片段。

Answer 1

您可能希望使用Element.scrollIntoView滚动到文档中的某个元素，而不影响当前URL或历史记录。

所以，不是像这样的链接

<a href="#next-section">Scroll to next section</a>

你会有

<a href="#" onclick="document.querySelector('#next-section').scrollIntoView(); event.preventDefault();">Scroll to next section</a>

或者在一个单独的JavaScript文件中的等效代码：基本上，使用DOM API(使用document.querySelector、document.getElementById等)找到要滚动到的元素，然后对该元素调用scrollIntoView。

如果接收单击事件的元素是链接(<a>)，则还需要调用event.preventDefault()来覆盖导航到href目标的默认行为(请注意，您可能仍然需要一个用于预期样式的伪href属性)。

<a href="#" onclick="document.querySelector('#next-section').scrollIntoView(); event.preventDefault();">Scroll to next section</a>
<div style="height: 8.5em;"></div>
<h2 id="next-section">Next section</h2>
<div style="height: 7em;"></div>
<h2 id="another-section">Another section</h2>
<div style="height: 5em;"></div>