jQuery使用缓动功能动画滚动到ID

Question

I am trying to scroll to specific ID :

 $("#button1").click(function() {
        $('html, body').animate({
            scrollTop: $("#Sec1").offset().top
        }, 700);

It works fine.

My Question is :

How do I do the same thing through easing functions ?

I have tried following function but doesn't work :

 $("#button1").click(function() {
        $('html, body').animate({
            scrollTop: $("#Sec1").offset().top
        }, 700, "easeInOutCirc");

Any suggestion would be appreciated.

Answer 1

In order to use types of easing other than the default or linear , you need to include jQuery UI. In the animate api page for jQuery, it says "The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear."

On the jQuery UI page for easing: http://api.jqueryui.com/easings/ you can see the other types that are able to be used if you include jQuery UI.