原创作者：
Fengjiajun
发布日期：2024年11月12日
小技巧：点击锚链接后不改变 URL
如果你的目标是点击锚链接后，不改变 URL，而仍然滚动到该元素的位置，可以通过 JavaScript 来控制页面滚动，阻止浏览器更新 URL。下面是如何做到这一点的代码示例：
<a href="#details" onclick="scrollToDetails(event)">Next Step</a>
<div id="details" class="custom-options-wrapper">
<!-- Your content for details section -->
<p>Details content goes here...</p>
</div>
<script>
function scrollToDetails(event) {
event.preventDefault();
var target = document.getElementById("details");
target.scrollIntoView({
behavior: 'smooth', // 平滑滚动
block: 'start' // 将目标元素对齐到容器顶部
});
history.pushState(null, '', window.location.pathname); // 保持当前 URL 不变
}
</script>
代码解释：
阻止默认行为：在 onclick 事件中，我们使用 event.preventDefault() 来阻止锚链接的默认行为（即跳转到 #details）。这样，URL 不会被更新为 #details。
滚动到目标元素：使用 scrollIntoView() 方法滚动到目标元素。behavior: ‘smooth’ 表示平滑滚动，block: ‘start’ 表示将目标元素对齐到视口的顶部。
更新历史记录（可选）：通过 history.pushState(null, ”, window.location.pathname)，我们可以更新浏览器的历史记录，但保持 URL 不变（因为它不包含哈希）。这确保了浏览器历史记录保持一致，且没有跳转。
