You are here

Jump smoothly from a link to an anchor.

In the stating point selector (in this case ".about") setup as link this code: javascript:void(0);

Example:

     <a class="about" href="javascript:void(0);">GET STARTED</a>

And the following jquery will do the rest of the job:

    function scrollToAnchor(aid){
       var aTag = $("a[name='"+ aid +"']");
       $('html,body').animate({scrollTop: aTag.offset().top - 55},'slow');
       }
       $(".about").click(function() {
       scrollToAnchor('about');
   });

Another approach (simplest):

$(".SELECTOR").click(function () {
   $("html, body").animate({ scrollTop: $("ELEMENTO TO SCROLL TO").offset().top - 100 }, 600);
});

Another approach (even better):

----HTML-----
<a href="#one">One</a>
<a href="#two">Two</a>
<hr>
<div id="one">First Element</div>
<hr>
<div id="two">Second Element</a>
----END HTML -----
$("a[href^='#']").click(function(e) {
e.preventDefault();
var position = $($(this).attr("href")).offset().top;
$("body, html").animate({
scrollTop: position
} /* speed */ );
});
code type: 
js