Rectangle 27 0

javascript Is it possible to animate scrollTop with jQuery?


$("html, body").animate(
    { scrollTop: "300px" },
    {
        complete : function(){
            alert('this alert will popup twice');
        }
    }
);
var completeCalled = false;
$("html, body").animate(
    { scrollTop: "300px" },
    {
        complete : function(){
            if(!completeCalled){
                completeCalled = true;
                alert('this alert will popup once');
            }
        }
    }
);

Because depending on which browser you are, you can either animate body OR html. By animating BOTH, you cover more browsers.

But in this case it will popup really only once, also if it has to be called repeatedly (click event on button) or am I missed something?

Here's how you can avoid the double callback.

Nick's answer works great. Be careful when specifying a complete() function inside the animate() call because it will get executed twice since you have two selectors declared (html and body).

The question is, why would you animate 'html, body' and not just 'body'?

To prevent double callback function firing you can use die() function before live() function call. This guaranties, that your live() handler will be called only once.

Yes, in this case it will only popup once. If you need to animate repeatedly, you would make the completeCalled variable local to the callback function that executes the animate function. That way it will still popup only once when you click, but it will popup again (just once) when you click again.

Note
Rectangle 27 0

javascript Is it possible to animate scrollTop with jQuery?


.animate( 
    {scrollTop:'300px'},
    300,
    swing,
    function(){ 
       alert(animation complete! - your custom code here!); 
       } 
    )
.animate( properties [, duration] [, easing] [, complete] )

Nick's answer works great and the default settings are nice, but you can more fully control the scrolling by completing all of the optional settings.

here is what it looks like in the API:

Note
Rectangle 27 0

javascript Is it possible to animate scrollTop with jQuery?


$("html, body").animate(
    { scrollTop: "300px" },
    {
        complete : function(){
            alert('this alert will popup twice');
        }
    }
);
var completeCalled = false;
$("html, body").animate(
    { scrollTop: "300px" },
    {
        complete : function(){
            if(!completeCalled){
                completeCalled = true;
                alert('this alert will popup once');
            }
        }
    }
);

Because depending on which browser you are, you can either animate body OR html. By animating BOTH, you cover more browsers.

But in this case it will popup really only once, also if it has to be called repeatedly (click event on button) or am I missed something?

Here's how you can avoid the double callback.

Nick's answer works great. Be careful when specifying a complete() function inside the animate() call because it will get executed twice since you have two selectors declared (html and body).

The question is, why would you animate 'html, body' and not just 'body'?

To prevent double callback function firing you can use die() function before live() function call. This guaranties, that your live() handler will be called only once.

Yes, in this case it will only popup once. If you need to animate repeatedly, you would make the completeCalled variable local to the callback function that executes the animate function. That way it will still popup only once when you click, but it will popup again (just once) when you click again.

Note
Rectangle 27 0

javascript Is it possible to animate scrollTop with jQuery?


.animate( 
    {scrollTop:'300px'},
    300,
    swing,
    function(){ 
       alert(animation complete! - your custom code here!); 
       } 
    )
.animate( properties [, duration] [, easing] [, complete] )

Nick's answer works great and the default settings are nice, but you can more fully control the scrolling by completing all of the optional settings.

here is what it looks like in the API:

Note
Rectangle 27 0

javascript Is it possible to animate scrollTop with jQuery?


$("html, body").animate({ scrollTop: "300px" });

FYI: If <html> has overflow-x:hidden; this animate will not work. (Might not work for overflow-y:hidden, and overflow:hidden, but I have not tested.

FYI: Using both html and body results in the complete function to be called twice. So be carefull.

Why do you need both html and body? There is some insight here: stackoverflow.com/questions/2123690/, but it is not a complete answer.

You can just use .animate() the scrollTop property, like this:

body is used by webkit, html is used by firefox.

Note
Rectangle 27 0

javascript Is it possible to animate scrollTop with jQuery?


$('html, body')
    .animate({ scrollTop: 100 })
    .promise()
    .then(function(){
        // callback code here
    })
});
// UPDATE: don't use this... see below
// only use 'body' for IE8 and below
var scrollTopElement = (window.pageYOffset != null) ? 'html' : 'body';

// only animate on one element so our callback only fires once!
$(scrollTopElement).animate({ 
        scrollTop: '400px' // vertical position on the page
    },
    500, // the duration of the animation 
    function() {       
        // callback goes here...
    })
});

Like Kita mentioned there is a problem with multiple callbacks firing when you animate on both 'html' and 'body'. Instead of animating both and blocking subsequent callbacks I prefer to use some basic feature detection and only animate the scrollTop property of a single object.

The above attempt at feature detection fails. Seems like there's not a one-line way of doing it as webkit type browsers pageYOffset property always returns zero when there's a doctype. Instead, I found a way to use a promise to do a single callback for every time the animation executes.

The accepted answer on this other thread gives some insight as to which object's scrollTop property we should try to animate: pageYOffset Scrolling and Animation in IE8

UPDATE - - -

Note
Rectangle 27 0

javascript Is it possible to animate scrollTop with jQuery?


$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

I fixed this by not animating the css directly but rather calling window.scrollTo(); on each step:

I was having issues where the animation was always starting from the top of the page after a page refresh in the other examples.

This also gets around the html vs body issue as it's using cross-browser JavaScript.

Note
Rectangle 27 0

javascript Is it possible to animate scrollTop with jQuery?


$('html, body')
    .animate({ scrollTop: 100 })
    .promise()
    .then(function(){
        // callback code here
    })
});
// UPDATE: don't use this... see below
// only use 'body' for IE8 and below
var scrollTopElement = (window.pageYOffset != null) ? 'html' : 'body';

// only animate on one element so our callback only fires once!
$(scrollTopElement).animate({ 
        scrollTop: '400px' // vertical position on the page
    },
    500, // the duration of the animation 
    function() {       
        // callback goes here...
    })
});

Like Kita mentioned there is a problem with multiple callbacks firing when you animate on both 'html' and 'body'. Instead of animating both and blocking subsequent callbacks I prefer to use some basic feature detection and only animate the scrollTop property of a single object.

The above attempt at feature detection fails. Seems like there's not a one-line way of doing it as webkit type browsers pageYOffset property always returns zero when there's a doctype. Instead, I found a way to use a promise to do a single callback for every time the animation executes.

The accepted answer on this other thread gives some insight as to which object's scrollTop property we should try to animate: pageYOffset Scrolling and Animation in IE8

UPDATE - - -

Note
Rectangle 27 0

javascript Is it possible to animate scrollTop with jQuery?


$("html, body").animate({ scrollTop: "300px" });

FYI: If <html> has overflow-x:hidden; this animate will not work. (Might not work for overflow-y:hidden, and overflow:hidden, but I have not tested.

FYI: Using both html and body results in the complete function to be called twice. So be carefull.

Why do you need both html and body? There is some insight here: stackoverflow.com/questions/2123690/, but it is not a complete answer.

You can just use .animate() the scrollTop property, like this:

body is used by webkit, html is used by firefox.

Note
Rectangle 27 0

javascript Is it possible to animate scrollTop with jQuery?


$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

I fixed this by not animating the css directly but rather calling window.scrollTo(); on each step:

I was having issues where the animation was always starting from the top of the page after a page refresh in the other examples.

This also gets around the html vs body issue as it's using cross-browser JavaScript.

Note