Animated scrolling using jQuery

For scrolling to the top of the document , we can write a javascript like : window.scrollTo(0,0); But its transition effect is left visible . If we want a smooth animation to show the scrolling , we can use the following jQuery code :

$(‘html,body’).animate({ ScrollTop: 0 }, 1000);

In order to scroll “hml/body” you can use the animate method. Use “ScrollTop” parameter to specify the position to scroll to. In the above instance 1000 is the time duration of the animation.

If we want to scroll to specified element position . Then we can use :
$(‘html,body’).animate({ scrollTop: $(“#divContainer”).offset().top }, 1000);
In the above line of code , the scroll will move to the position of the “div-container” element.

Sample Code

Copy paste the following sample code , save with html extension and run.

function ScrollToBottom() {
$('html,body').animate({
       scrollTop: $('#btnScrollToTop').offset().top}, 2000);
}
 
function ScrollToPositionA() {
$('html,body').animate({
      scrollTop: $('#btnScrollBottom').offset().top}, 1000);
}
 
function ScrollToTop() {
       $('html,body').animate({scrollTop: 0}, 2000);
}
 




    
        
 
 
 
        
 
 
        
 
 
 
        
 
 
 
         Position A