Question

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

案例

我在页面底部有一个显示Back to Top的链接，该链接只是这样的目标链接：

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

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

问题

点击目标链接后，ID #top会添加到页面的网址中，即：

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

问题

有没有办法删除或避免将该#top添加到网页的网址，但保留页面功能跳到顶部？

非常感谢任何帮助。

Answer 1

在任何一种情况下（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提供动画持续时间和缓动的选项以及设置回调的功能。

Vanilla JavaScript

你也可以在整个过程中使用Vanilla JS。然而，查询和绑定会变得更加痛苦。

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

Answer 2

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

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

Answer 3

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

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

Answer 4

这将有效

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

Answer 5

您可以从此链接http://gazpo.com/2012/02/scrolltop/找到解决方案。试试这个。

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

5 个答案: