javascript - 如何使用 jquery-ui 使用带有滚动条的缓动？

Question

我正在尝试用缓动来动画这个回到顶部的图标。相反，它只是跳转到页面顶部。我错过了什么？

$(window).scroll(function(){
    if($(window).scrollTop() > 200){
        $("#back-to-top").fadeIn(200);
    } else{
        $("#back-to-top").fadeOut(200);
    }
});

$('#back-to-top, .back-to-top').click(function() {
    $("html, body").animate({
        scrollTop:0
    }, {
        duration: 1200,
        easing: "easeInOutExpo"
    });
});

Answer 1

jsFiddle 演示

好吧，这很令人困惑。

您的原始代码有效。

它只需要包含 jQuery UI 库，因为您正在使用的缓动不是常规 jQuery 库的一部分。

$('button').click(function() {
$("html, body").animate({ scrollTop:0 }, 
        {
            duration: 1200,
            easing: "easeInOutExpo"
        });
});

Answer 2

jQuery 中唯一支持的缓动类型是默认的swing，然后是linear. 如果你想使用类似的东西，easeInOutExpo那么你需要包括jQuery UI。

此代码将使用linear缓动。您可以将其切换到swing以查看差异。

http://jsfiddle.net/r3qqN/

$('#back-to-top, .back-to-top').click(function() {
    $('html, body').animate(
        { scrollTop: 0 },
        {
            duration: 1200,
            easing: 'linear'
            // try using 'swing' too
            // 'easeInOutExpo' is supported with jQuery UI
        }
    });
});

easeInOutExpo不是 jQuery 的一部分。它是jQuery UI的一部分- 运行代码时是否包含并加载了 jQuery UI？