Smooth Scrolling using jQuery

A snippet of smooth scrolling using jquery.

by lennyekberg

HTML

<body>
    
    <h1 id="top">How to make smooth scrolling.</h1>

<a href="#mysection1" rel="relativeanchor">Section 1</a>
<a href="#mysection2" rel="relativeanchor">Section 2</a>

<div style="height: 1500px;">This requires jQuery. <a href="#top" rel="relativeanchor">Go Back to Top</a></div>

<div id="mysection1">Section 1</div>


<div style="height: 1500px;">This requires jQuery. <a href="#top" rel="relativeanchor">Go Back to Top</a></div>
    


<div id="mysection2">Section 2</div>

    <a href="#top" rel="relativeanchor">Go Back to Top</a>
</body>

CSS

body { background-color: #000; color: #fff; }
a { color: aqua; }

JavaScript

$(document).ready(function() {
	$('a').click(function(){
	    $('html, body').animate({
	        scrollTop: $( $.attr(this, 'href') ).offset().top
	    }, 500);
	    return false;
	}); 
});