How to scroll smoothly with jQuery

[box type="alert" size="large"] Please notice: there's an updated version of this snippet.

Check out the new version Smooth Scroll Effect to anchor - jQuery.


We will add a jQuery function to create smooth scroll in our anchor links.

jQuery Animate

You can customize the speed of the effect.

Change the 2000 for 1000 (faster) or 5000 (slower).


$('a[href*=#]').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {

var $target = $(this.hash);

$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

if ($target.length) {

var targetOffset = $target.offset().top;

$('html,body').animate({scrollTop: targetOffset}, 2000);

return false;




Download Demo

Full Code

Example 17 | CodeGround

Go back and leave a Comment


Leave a Reply

Add <code> Some Code </code> by using this tags.