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

Remove/avoid adding target link to URL

本文关键字：链接 添加 URL 目标 删除      更新时间：2023-09-26

对于这里的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，但保留页面跳到顶部的功能？

如有任何帮助，我们将不胜感激。

在任何一种情况下（jQuery或vanilla 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

你也可以全程使用VanillaJS。。。然而，查询和绑定变得更加痛苦。

现代浏览器支持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; }
  }
}

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

您需要停止标记a的默认事件来触发。

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

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

这将适用于

$('a.standard').click(function() {
    $('body,html').animate({
        scrollTop: 0
    });
});
相关文章：