时间戳

首页 > 解决方案 > 如何避免使用锚点将我带到页面顶部？

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

问题描述

有什么方法可以阻止我点击锚点将我带到页面顶部？

这是我的代码：

<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>

标签： htmlcssanchor

解决方案

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')
})

希望这有帮助:)

推荐阅读