删除/避免向 URL 添加目标链接

对于这里的 jQuery/JavaScript 专家来说，这可能很简单，但我在网络上找不到解决方案。

Case

我在页面底部有一个链接，上面写着Back to Top，该链接只是一个目标链接，如下所示：

<a href="#top" class="standard">Back to Top</a>

因此，当您单击它时，它会跳转到页面顶部。简单的。

Problem

当点击目标链接时，id#top添加到页面的URL中，即：

http://website.com/about-us/#top

Question

有没有办法删除或避免获取该 ID#top添加到页面的URL但保留页面跳转到顶部的功能？

非常感谢任何对此的帮助。

无论哪种情况（jQuery 或普通 JavaScript），您都需要执行以下操作：

• 选择所有锚标记href被设定为#top
• 创建一个“跳转”函数，将页面位置设置为顶部并returns false防止默认链接行为
• 将“跳转”功能绑定到click找到所有节点的事件

要跳跃，您有多种选择。我在下面的第一个示例中提供了它们（特定于 jQuery 和 JS）。

使用 jQuery

jQuery 使选择并绑定到click事件容易。然后您可以使用 jQuery 或直接 JavaScript 跳转到页面顶部。

$('a[href="#top"]').click(function() {

   //
   // To jump, pick one...
   //

   // Vanilla JS Jump
   window.scroll(0,0)

   // Another Vanilla JS Jump
   window.scrollTo(0,0)

   // jQuery Jump
   $('html,body').scrollTop(0);

   // Fancy jQuery Animated Scrolling 
   $('html,body').animate({ scrollTop: 0 }, 'slow');

   //
   // ...then prevent the default behavior by returning false.
   //

   return false;

});

jQuery 的animate http://api.jquery.com/animate/提供动画持续时间和缓动选项以及设置回调的功能。

普通 JavaScript

您也可以自始至终使用 Vanilla JS...但是，查询和绑定变得有点痛苦。

现代浏览器支持document.querySelectorAll() https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll这将允许您获取所有链接元素，就像使用 jQuery 一样：

var links = document.querySelectorAll('a[href="#top"]');

然后循环元素并绑定“jump”：

for (var i = links.length - 1; i >= 0; i--) {
  links[i].onclick = function() { window.scroll(); return false; };
};

如果您的目标浏览器没有为您提供querySelectorAll您只需循环遍历所有锚标记即可找到链接到的锚标记#top:

var links = document.body.getElementsByTagName('a');
for (var i = links.length - 1; i >= 0; i--) {
  var l = links[i];
  if(l.getAttribute('href') === '#top') {
    l.onclick = function() { window.scroll(); return false; }
  }
}