11 Vote

jQuery: Scroll down smoothly on a webpage

Tip by Stefan Trost | 2012-07-13 at 17:19

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.


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() {      
    $("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.


About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile


Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.


Ask your own question or write your own article on askingbox.com. That’s how it’s done.