Smooth Scrolling using jQuery

A snippet of smooth scrolling using jquery.

HTML

<body>
    <div class="content">
    <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>
        </div>
</body>

CSS

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

.content {
    height: calc(100% - 50px);
    
    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(){
        var $el = $($(this).attr('href'));
	    $('.content').animate({
	        scrollTop: $el.prop('offsetTop')
	    }, 2000);
	    return false;
	}); 
});