I am trying to animate this back to top icon with an easing. Instead it simply jumps to the top of the page. What am I missing?

$(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"
    });
});

I am trying to animate this back to top icon with an easing. Instead it simply jumps to the top of the page. What am I missing?

$(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"
    });
});

• javascript
• jquery
• jquery-ui

Share Improve this question Follow edited Aug 20, 2013 at 19:31 Manish Kumar 15.5k55 gold badges2020 silver badges2727 bronze badges asked Aug 20, 2013 at 18:54 alias51alias51 8,6582222 gold badges106106 silver badges186186 bronze badges 1

• paste your code with html – Vaibs_Cool Commented Aug 20, 2013 at 19:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

jsFiddle Demo

Okay this was confusing.

Your original code works.

It just required including jQuery UI library also for the easing you're using is not a part of the regular jQuery library.

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

The only supported easing types in jQuery are the default which is swing and then linear. If you want to use something like easeInOutExpo then you need to include jQuery UI.

This code will use linear easing. You can switch it to swing to see the difference.

http://jsfiddle/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 is not part of jQuery. It is a part of jQuery UI - is jQuery UI included and loaded when you run your code?