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 Demo

好吧这令人困惑。

您的原始代码有效。

它只需要包含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并在运行代码时加载？

如何使用jquery-ui使用scrolltop缓动？

2 个答案: