在 jquery 中从 scrollTo 动画中排除特定 #

Question

下面的 jquery 代码让我滚动到页面内的 link，如 #link。但现在我有三个特殊的 links，#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;
    var $target = $(target);
    if( $.inArray( target, special ) > -1 ){
       $('html, body').stop().animate({
        'scrollTop': $target.offset().top-80 //offset -80 for navigation height
       }, 900, 'swing');
    }
});

Answer 2

我会将您的代码更改为：

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');
});

这定义了一个包含 'special' 个值的数组，哈希值不能相等。 $.inArray() 用于检查当前哈希是否与 special 数组中的值之一匹配。如果是，那么它 returns 并且下面的代码不会被执行。

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;
    });
});

Answer 3

谢谢大家！昨天对我来说显然太晚了:) Joe 的回答适用于我在 var 特殊列表中包含的任何给定#parameter。所以它也非常适合动态模板。

再次感谢！

在 jquery 中从 scrollTo 动画中排除特定 #

Exclude specific # from scrollTo Animation in jquery

javascript

css

jquery

scrollto

hashtag