6

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

对此的任何帮助将不胜感激。

4

4 回答 4

4

无论哪种情况（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;

});

jQueryanimate提供了动画持续时间和缓动选项以及设置回调的能力。

香草 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; }
  }
}
于 2013-08-26T04:53:18.490 回答
2

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

    e.preventDefault();
    $('html, body').animate({ scrollTop: 0 }, 'slow');
于 2013-08-26T04:42:12.623 回答
2 
$('a[href=#top]').click(function(){
     $(window).scrollTop(0);
     return false;
});

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

于 2013-08-26T05:03:22.573 回答
1

这将起作用

$('a.standard').click(function() {
    $('body,html').animate({
        scrollTop: 0
    });
});
于 2013-08-26T04:42:32.523 回答