Easing on Animate Scroll with jQuery

Question

I'm trying to create an ease effect on my animate function in jQuery, but I'm having some trouble. Here's what I have so far:

function myCustomFunction(id){
    var divTag = $("div[name='"+ id +"']");
    $('html,body').animate({scrollTop: divTag.offset().top}, 800);
}

The ease I want to use is called "easeOutQuint". I tried to follow the example here (http://easings.net/#easeOutQuint) but wasn't able to apply the example to my function.

Answer 1

Firstly, include first script from section download on this page:(http://gsgd.co.uk/sandbox/jquery/easing/).

Then type jQuery animate line like this below:

function myCustomFunction(id){
var divTag = $("div[name='"+ id +"']");
$('html,body').animate({scrollTop: divTag.offset().top}, 800, 'easeOutQuint');
}

Here you can see example... http://jsfiddle.net/Gq367/

As you can see, you missed the easing parameter in jquery animate function. Quick reminder: .animate( properties [, duration ] [, easing ] [, complete ] )

I'm interested why you select div by name attribute?