javascript - 从 jquery 中的 scrollTo 动画中排除特定#

Question

下面的 jquery 代码让我滚动到我页面内的链接，如#link。但现在我有三个特殊链接，#tab-1 #tab-2 #tab-3 不应包含在此 scrollto 脚本中，什么也不做。我不知道如何从这个脚本中排除特定的#。

感谢您的帮助!

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

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top-80 //offset -80 for navigation height
    }, 900, 'swing');
});

Answer 1

我会将您的代码更改为:

var special = ['#tab-1', '#tab-2', '#tab-3'];

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

    var target = this.hash;

    if( $.inArray( target, special ) > -1 ) return;

    var $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top-80
    }, 900, 'swing');
});

这定义了哈希不能相等的“特殊”值数组。 $.inArray()用于检查当前哈希值是否与 special 数组中的值之一匹配。如果是，则返回并且不执行下面的代码。

Bootstrap 中轮播的另一个例子:

var special = ['#carousel-example-generic'];
$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash;
    if( $.inArray( target, special ) > -1 ) return;
    var $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top 
    }, 500, function () {
        window.location.hash = target;
    });
});