html - href hashtag # 使模态弹出库点击跳转到网站顶部

Question

我正在使用带有模态弹出库的 html5-css3 模板，当我单击任何图像时，它会跳转到站点的顶部。这是因为标签，我不知道如何让它正常工作。请帮忙！我是编码新手，我已经搜索了几天的答案，但没有找到解决方案。

这是html代码的样子：

<a href="#" data-reveal-id="#modal-01"><img src="images/portfolio/canandreu.jpg" alt=""/></a>

Answer 1

您可以使用href="JavaScript:Void(0);"

通过使用JavaScript:Void(0)，您可以消除不需要的副作用，因为它将返回未定义的原始值。

<a href="JavaScript:Void(0)" data-reveal-id="#modal-01"><img src="images/portfolio/canandreu.jpg" alt=""/></a>

Answer 2

你可以使用或

但我建议使用用户 onclick="return false;" 这将解决您的问题

Answer 3

modal-link如果您为每个标签添加一个类a，那么您可以使用如下代码：

var modalLinks = document.querySelectorAll('.modal-link');
Array.prototype.forEach.call(modalLinks, function(el, i){
  el.addEventListener('click', function(e){
    e.preventDefault();
  });
});

这将防止该类的每个元素将modal-link您跳到页面顶部。