jQuery: Scroll down smoothly on a webpage

To scroll down on a website, you are typically using anchor links. If you click on such a link, the view jumps directly down to the specified part of the page.

If you would like to have it more beautiful and smoothly, you can use the following jQuery code:

$("html, body").animate({scrollTop:$(document).height()}, 800);

If this JavaScript code is executed, the page scrolls gently down as if by magic. With the last parameter (here "800"), the speed of the scrolling can be determined. Simply use an arbitrary value here, as it will appear best for you and your purpose.

Example

Recently, I want to show you an example. We want to attach the code above to all the links on our website having the class "tobottom". One of our links might look like this:

<a href="#" class="tobottom">Scroll to bottom</a>

With this code, we attach our code to all elements with the class "tobottom":

$(document).ready(function() {      
  $(".tobottom").click(function(){
    $("html, body").animate({scrollTop:$(document).height()}, 800);
    return false;
  });    
});

We have to write "return false" in the code so that the default action of the link (follow link) is not working.

JavaScript is disabled?

Our example will only work if the visitor of our site has enabled JavaScript. How it also works even with JavaScript disabled, I will show you in this tip.