删除/避免将目标链接添加到 URL答案

【问题标题】：Remove/avoid adding target link to URL删除/避免将目标链接添加到 URL
【发布时间】：2013-08-26 18:19:06
【问题描述】：

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

案例

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

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

所以当你点击它时，它会跳转到页面顶部。很简单。

问题

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

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

问题

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

非常感谢任何帮助。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

选择href 设置为#top 的所有锚标记
创建一个“跳转”函数，将页面位置设置为顶部并返回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 提供动画持续时间和缓动选项以及设置回调的功能。

原版 JavaScript

你也可以在整个过程中使用 Vanilla JS……但是，查询和绑定变得有点痛苦。

现代浏览器支持document.querySelectorAll()，这将允许您像使用 jQuery 一样抓取所有链接元素：

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

然后循环遍历元素并绑定“跳转”：

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

【讨论】：

啊，太好了！这很完美。解释很好，感谢您扩展您的答案。

【解决方案2】：

$('a[href=#top]').click(function(){
     $(window).scrollTop(0);
     return false;
});

需要停止标签a的默认事件触发。

【讨论】：

【解决方案3】：

在处理锚点点击事件时，始终使用e.preventDefault(); On Click of Anchor 元素。当你不需要锚元素时。

    e.preventDefault();
    $('html, body').animate({ scrollTop: 0 }, 'slow');

【讨论】：

【解决方案4】：

这会起作用

$('a.standard').click(function() {
    $('body,html').animate({
        scrollTop: 0
    });
});

【讨论】：