时间戳

首页 > 解决方案 > 在非锚哈希链接上禁用平滑滚动？

javascript - 在非锚哈希链接上禁用平滑滚动？

问题描述

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

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

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

效果很好，除了我在页面上有一些标签也使用哈希链接。单击每个选项卡时，页面将滚动到屏幕顶部。

有没有办法让这个平滑滚动工作，只有当一个特定的锚被添加到散列（如/#features）时才工作，当它只是一个散列时（如/#）

标签： javascriptjqueryhtml

解决方案

您可以添加一个:not()选择器以消除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>

推荐阅读