jquery - 如何在动画/滚动顶部添加“缓动”

Question

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

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

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

$('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套件。

---

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

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