Question

我需要与scrollTop一起使用jQuery动画来为我的锚链接创建一个平滑的滚动效果。在我目前的项目中，这是行不通的。所有的animate - scrollTop事件都没有做任何事情。我在标头中加载jQuery 3.1.1。在我的页脚main.js中，我使用以下javascript：

$('a[href*=#]').on('click', function(event){    
    console.log("ScrollTop");
    $("html, body").animate({ scrollTop: 500 }, "slow");
    return false;
});

我可以在我的控制台中看到ScrollTop，但没有动画。我不知道该怎么办我尝试了很多东西。我还在它现在正在使用的所有不同浏览器中进行了测试。

Answer 1

问题是，href包含#的选择器在没有引号的情况下会给出不同的含义。将#放入引号后，它就可以正常工作。

$('a[href*="#"]').on('click', function(){  
    $('html,body').animate({scrollTop: 500}, "slow");    
});

示例：https://jsfiddle.net/3vy7adh7/

或者

如果您想避免使用任何有效的a代码，

$('a').on('click', function(e)
{    
    e.preventDefault();
    if($(this).attr('href').indexOf('#') > -1)
      $('html,body').animate({scrollTop: 500},"slow");     
});

示例：https://jsfiddle.net/3vy7adh7/1/

Answer 2

这应该适合你：

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

jQuery scrollTop事件不是动画

2 个答案: