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%;
}
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 () {
    if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
        $('html').css({'overflow-x':'auto','overflow-y':'hidden'});
    }
    $('a[rel="relativeanchor"]').click(function () {
        var $el = $($(this).attr('href'));
        $('html, body').stop().animate({
            scrollTop: $el.prop('offsetTop')
        }, 2000);
        return false;
    });
});