JMS094: jQuery Smooth Scroll to Anchor Using animate()

In this week's Tech Tutorial, you'll learn how to build a smooth scroll to an anchor tag using jQuery animate() and scrollTop.

Get the source code on Patreon:

Show notes page for this episode:

Join the Top 3% of Developers On TopTal:

Subscribe on YouTube:

Subscribe on Google Play Music:

Subscribe on iTunes:

-~-~~-~~~-~~-~-
Please watch: "Ryan Carson: How to Get an IT Job WITHOUT a College Degree"
-~-~~-~~~-~~-~-

[harishkumarsrigiri]

Thank you so much for this video. It really helped me to easily understand smooth scroll effect.

[jacksalcedo]

This isn't working for me, is there anyway I can send you my script and you can take a look at it?

[thedoctordarren]

Many thanks, the code is working for me :D

[tairitzhak]

Hi, I was wondering if I can use the function so that if I click on it, it would load another page and then scroll to the specific div element in that page?
Also, thanks for making this video

[PoorGamerGaming]

Hi! Good Tutorial! I wanted to ask the shortcut you used to remove the comments instantly...

[samdn]

This does not work. must be something with jquery API. when I add the link to that ajax API it does not do anything. tried changing jQuery version and still nothing.

[tom_ski]

if doesn't work $target in line 23 needs parentheses ;)

[resiennn]

Can somebody help me?? Thanks
$(document).ready(function(){

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

var target = this.hash;
var $target = $(target);
//scroll
$('html, body').animate({
'scrollTop': $target.offset().top;
}, 1000, 'swing', function () {
window.location.hash=target;
});


});

});