Smooth Scrolling using jQuery

A snippet of smooth scrolling using jquery.

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

html {
    margin-top: 50px;
    width: 100%;
    height: 100%;
    overflow-x:auto;
    overflow-y:hidden;
}

body {
    width: 100%;
    height: calc(100% - 50px);
    overflow-x:auto;
    overflow-y:scroll;

    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    /*overflow:hidden;*/
    /*padding-bottom: 1000px;*/
}

JavaScript

$(document).ready(function() {
	$('a[rel="relativeanchor"]').click(function(){
	    $('html, body').animate({
	        scrollTop: $( $.attr(this, 'href') ).offset().top
	    }, 2000);
	    return false;
	}); 
});