Question

我正在使用一些jQuery，我遇到了平滑滚动以锚定页面内的链接。我现在意识到这个脚本中有一些东西阻止了锚链接（例如，'＃top'）出现在URL中 - 我确实想要URL中的锚链接。有人可以告诉我这是关闭默认行为的部分以及我可以做些什么来重新开启它？

<script>
$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});
</script>

Answer 1

您可以使用window.location.hash

在动画的完成回调中手动设置url哈希

$('a[href*="#"]:not([href="#"])').click(function() {

    var hash = this.hash;
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 500, 'swing', function(){
           window.location.hash = hash;
        });
        return false;
      }
    }
  });

Answer 2

我没有在真实页面上对此进行测试，但在动画结束时，您可以设置哈希值。

＆＃13;

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var hash = this.hash,
          target = $(hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 500, function(){
            window.location.hash = hash;
        });
        return false;
      }
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#foo">bottom</a><br/>
A<br/>B<br/>C<br/>D<br/>
E<br/>F<br/>G<br/>H<br/>
I<br/>J<br/>K<br/>L<br/>
M<br/>N<br/>O<br/>P<br/>
Q<br/>R<br/>S<br/>T<br/>
U<br/>V<br/>W<br/>X<br/>
Y<br/>Z<br/>
<p id="foo">HEY</p>

＆＃13;

脚本阻止锚链接出现在URL中

2 个答案: