单击带有主题标签+文本的链接时跳到顶部

Question

我有以下语法的链接：

<div class="footer">
    <a href="page#link1">Link 1</a>
    <a href="page#link2">Link 2</a>
    <a href="page#link3">Link 3</a>
</div>

当我在http://example.com/page上点击并点击3个链接中的任意一个时，它就不会跳转到页面顶部。

但是，如果链接是这样的话，它会跳转：

<a href="#">Link 1</a>

点击任何链接时，如何让它滚动/跳到顶部？

Answer 1

您可以使用 window.ScrollTo() 设置要使滚动发生的所有元素的点击事件处理程序：

＆＃13;

＆＃13;

// Get a node list of all the elements that use the footer class
var footers = document.querySelectorAll(".footer");

// Loop through the footers and set up a click event handler for each
for(var i = 0; i < footers.length; i++){
  footers[i].addEventListener("click", function(e){    
    // Scroll to the top of the page:
    window.scrollTo(0, 0);
  });
}

＆＃13;

<a href="page#link1"><div class="footer">Link 1</div></a>
<a href="page#link2">Link 2</a>
<a href="page#link3"><div class="footer">Link 3</div></a>

＆＃13;

＆＃13;

＆＃13;