如何避免使用锚点将我带到页面顶部？

Question

有没有办法阻止我点击一个锚点把我带到页面顶部？

这是我的代码：

<div class="slider">
<div class="slides">
<div id="slide-1">1</div>
<div id="slide-2">2</div>
<div id="slide-3">3</div>
<div id="slide-4">4</div>
<div id="slide-5">5</div>
</div>
<a href="#slide-1">1</a>
<a href="#slide-2">2</a>
<a href="#slide-3">3</a>
<a href="#slide-4">4</a>
<a href="#slide-5">5</a>

Answer 1

据我所知，你无法避免与它相关的事实，当你得到页面需要被渲染。在此之前，这个id就不存在了。

所以没办法删除它。你只能尝试加快这一点。只是尽量确保您的网页加载速度快。

Answer 2

A）如果我理解你，你可以使用纯CSS。

a[href*="#slide"] {
  pointer-events: none;
}

B）阅读您在评论中写的内容后，您可以使用PHPglue建议的内容。

document.querySelectorAll('a[href*="#slide"]')
.forEach($a => $a.onclick = e => {
   e.preventDefault() // don't go 
   console.log('but do your things')
})

希望这有帮助:)

Answer 3

你的语法很混乱，但很容易理解这是怎么发生的......你可以做内部页面链接，它允许你从同一页面内的一个点（或部分）跳转到另一个点，甚至内部的特定段落另一页。示例代码的问题在于您使用HTML语法链接到CSS。

<div id="slide-1">1</div>
...
<a href="#slide-1">1</a>

确实，你在#标签中使用了<a>（哈希标签）。因此，从理论上讲，使用<a href="#slide-1">1</a>应该可行。是的，您可以使用同名的id来确定链接应该带您到哪里。但是 - 您不能将该名称用于页面上的任何其他内容。它必须是独特和具体的，以避免任何混淆。由于您的<div>标记与锚标记具有相同的标识符，并且由于您使用的是CSS选择器id，因此浏览器忽略了您的<div id=语句，因为它无法在CSS文件中找到#slide-1样式。 解决此问题的最简单方法是将代码更改为：

<div id="css_style" name="slide-1">1</div>
...
<a href="#slide-1">1</a>

这样做将允许<div>保留预期的样式并将链接连接到页面上的锚点。只是不要给你的CSS样式同名，使用别的东西。 W3C Links Documentation