Rectangle 27 0

jQuery .scrollTop(); + animation?


$('.Classname').click(function(){
   $("html, body").animate({ scrollTop: 0 }, 600);
   return false;
});

$("html") should be used instead, because in your case if you add a callback function it will be called twice, once for html and once for body. And using body does nothing.

it seems that depends on the browser. in some, $('html') may do nothing, so you need to use both, and take care of the callback triggered twice.

Note
Rectangle 27 0

jQuery .scrollTop(); + animation?


body.animate({
      scrollTop:0
    }, 500, 
    function(){} // callback method use this space how you like
);
Note
Rectangle 27 0

jQuery .scrollTop(); + animation?


var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() { 
   alert("Finished animating");
});

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

I had to mention animate duration without quotes when I had only 2 parameters for animate function. That was weird.

I'm not sure if it's because this post is 4 years old, but I think in newer versions of jQuery you need to remove those single quotes around the timing: body.animate({scrollTop:0}, 500, 'swing', function() { alert("Finished animating"); });

Thanks Thomas, that's what I needed. I also added a delay since the class is added so quickly. if(top!=0) { console.log("hidden scroll"); body.animate({scrollTop:0}, '500', 'swing', function() { console.log("Finished animating"); leftitems.delay(1000).removeClass("slide"); }); }

Thomas had good point adding body and html. Case 1. Chrome reading body and srolling, FIrefox need html to do it.

To do this, you can set a callback function for the animate command which will execute after the scroll animation has finished.

Where that alert code is, you can execute more javascript to add in further animation.

Your callback will execute twice, by the way, because you selected two elements.

Note
Rectangle 27 0

jQuery .scrollTop(); + animation?


$('a[href^="#"]').on('click', function(event) {

    var target = $( $(this).attr('href') );

    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 500);
    }

});
Note
Rectangle 27 0

jQuery .scrollTop(); + animation?


var body = $("body, html");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
       body.animate({scrollTop :0}, 500,function(){
         //DO SOMETHING AFTER SCROLL ANIMATION COMPLETED
          alert('Hello');
      });
}
Note
Rectangle 27 0

jQuery .scrollTop(); + animation?


var body = $('html, body');

    $('.toTop').click(function(e){
        e.preventDefault();
        body.animate({scrollTop:0}, 500, 'swing');

});

.toTop = class of clicked element maybe img or a

Code with click function()

Note
Rectangle 27 0

jQuery .scrollTop(); + animation?


var body = $("body, html");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
       body.animate({scrollTop :0}, 500,function(){
         //DO SOMETHING AFTER SCROLL ANIMATION COMPLETED
          alert('Hello');
      });
}
Note
Rectangle 27 0

jQuery .scrollTop(); + animation?


var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() { 
   alert("Finished animating");
});

I'm not sure if it's because this post is 4 years old, but I think in newer versions of jQuery you need to remove those single quotes around the timing: body.animate({scrollTop:0}, 500, 'swing', function() { alert("Finished animating"); });

Just tried $('html') does not work in Chrome and $('body') does not work in Firefox, so $('html, body') is needed. And also calling .stop() is a good thing I tried to call animate several times quickly in chrome and after that I could not scroll down the page.

Thanks Thomas, that's what I needed. I also added a delay since the class is added so quickly. if(top!=0) { console.log("hidden scroll"); body.animate({scrollTop:0}, '500', 'swing', function() { console.log("Finished animating"); leftitems.delay(1000).removeClass("slide"); }); }

Thomas had good point adding body and html. Case 1. Chrome reading body and srolling, FIrefox need html to do it.

To do this, you can set a callback function for the animate command which will execute after the scroll animation has finished.

Where that alert code is, you can execute more javascript to add in further animation.

Your callback will execute twice, by the way, because you selected two elements.

Note
Rectangle 27 0

jQuery .scrollTop(); + animation?


var body = $('html, body');

    $('.toTop').click(function(e){
        e.preventDefault();
        body.animate({scrollTop:0}, 500, 'swing');

});

.toTop = class of clicked element maybe img or a

Code with click function()

Note
Rectangle 27 0

jQuery .scrollTop(); + animation?


$('.Classname').click(function(){
   $("html, body").animate({ scrollTop: 0 }, 600);
   return false;
});

$("html") should be used instead, because in your case if you add a callback function it will be called twice, once for html and once for body. And using body does nothing.

it seems that depends on the browser. in some, $('html') may do nothing, so you need to use both, and take care of the callback triggered twice.

Note