使用jQuery简化Animate Scroll

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?