Smooth Scrolling using jQuery

A snippet of smooth scrolling using jquery.

by NunoMira

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>
     
    <br>
    <br>
    <div style="height: 1500px;">
        Bla<br>bla<br>bla<br>...
    </div>

    <div id="mysection1">Section 1</div>
    <div style="height: 500px;">
        This requires jQuery.
        <a href="#top" rel="relativeanchor">Go Back to Top</a>
    </div>
    
    <div id="mysection2">Section 2</div>
    <div style="height: 500px;">
        This requires jQuery.
        <a href="#top" rel="relativeanchor">Go Back to Top</a>
    </div>
</body>

CSS

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

a
{ 
    color: aqua;
}

JavaScript

//Anchoragem dentro de uma página com animação 
$(document).ready(function()
{
	$('a[rel="relativeanchor"]').click(function()
    {
	    $('html, body').animate({
	        scrollTop: $( $.attr(this, 'href') ).offset().top
	    }, 800);
        
	    return false;
	}); 
});