javascript - 禁用非 anchor 哈希链接上的平滑滚动？

Question

我有一些用于平滑滚动的 jquery:

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 1400);
});

效果很好，只是页面上有一些选项卡也使用哈希链接。单击每个选项卡时，页面会滚动到屏幕顶部。

有没有办法让这种平滑滚动工作，仅当特定 anchor 添加到散列(如/#features)时才起作用，而当它仅是散列(如/#)时则不起作用

Answer 1

您可以添加:not() selector消除 href="#" 触发 click 事件。

$(document).on('click', 'a[href^="#"]:not([href=#])', function(event) {
  console.log("Clicked");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Hash Only</a>
<a href="#Anchor1">Anchor 1</a>
<a href="#Anchor2">Anchor 2</a>