有没有办法为某些 html 锚点禁用 jQuery 滚动动画？

Question

我希望默认情况下每个 href 锚点都平滑滚动（这可行！）...并手动防止其中一些不平滑。

有没有聪明的方法来做到这一点？也许 "notscrollable" CSS class 作为目标？它会是什么样子？

jQuery( function ( $ ) {
    'use strict';

    // Smooth scroll on anchor links
    $('a[href^="#"]').on('click', function(e) {
        e.preventDefault();
        var target = this.hash;
        var $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top-20
        }, 900, 'swing', function() {
            window.location.hash = target;
        });
    });

});

所有 html 锚点都可以使用此脚本平滑滚动。好！

某些特定的锚点不应平滑滚动。这是需要的。

Answer 1

只需添加一个新的 class 到 a 标签，您要为其禁用：

<a class="noscroll"  href="# ...

并将其更改为：

 $('a[href^="#"]').not(".noscroll").on(...

Answer 2

您好，您可以将自定义属性或 class 添加到不需要滚动的锚点元素。

例如：

<a href="#hello">click</a>
<a href="#hello" noscroll>no scroll</a>

并像这样更改代码：

jQuery( function ( $ ) {
'use strict';

// Smooth scroll on anchor links
$('a[href^="#"]:not([noscroll])').on('click', function(e) {
    e.preventDefault();
    var target = this.hash;
    var $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top-20
    }, 900, 'swing', function() {
        window.location.hash = target;
    });
});

});

这里是 jsfiddle example。祝你好运，欢迎随时提问

有没有办法为某些 html 锚点禁用 jQuery 滚动动画？

Is there a way to disable jQuery scroll animation for some html anchors?

jquery

smooth-scrolling