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

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

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 2

据我所知，你无法避免它，这与当你进入页面时，它需要被渲染的事实有关。在此之前，这个id根本不存在。

所以没有办法去掉它。你只能试着把速度提高一点。只需确保页面加载速度快即可。

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