Question

我正在使用以下函数创建一个滚动动画来锚定链接：

$('a').click(function(){
    $('html, body').animate(
        {scrollTop: $( $.attr(this, 'href') ).offset().top}, 
        500 );
    return false;
});

我想添加缓动。但是，当我在'500'之后添加'easing'时会破坏脚本：

$('a').click(function(){
    $('html, body').animate(
        {scrollTop: $( $.attr(this, 'href') ).offset().top}, 
        500, easing );
    return false;
});

任何想法我做错了什么？

Answer 1

首先，您需要包含jQuery.UI脚本，然后您的代码应该看起来：

$('a').click(function(){
    var top = $('body').find($(this).attr('href')).offset().top;
    $('html, body').animate({
        scrollTop: top
    },500, 'easeOutExpo');

    return false;
});

供您参考：

<强>缓解

.animate（）的剩余参数是一个命名缓动的字符串功能使用。缓动函数指定的速度动画在动画中的不同点上进行。该只有jQuery库中的缓存实现是默认的，叫做摇摆，一个以恒定的速度前进，称之为线性的。使用插件可以获得更多的缓动功能，最值得注意的是jQuery UI套件。

为什么您的代码不起作用：

因为您使用的是动态方法范围内的this 引用body和html个对象。
因为easing不是方法。是您需要的字符串类型的动画属性将其写为字符串，例如：'easeOutExpo'或"easeOutExpo"。

如何为动画/滚动顶部添加'缓动'

1 个答案:

为什么您的代码不起作用：