Scroll to example

from http://bit.ly/1q61brO

by panchroma

HTML

<div class="link_wrapper">
<a class="scroll_to" data-more-info="section_one">Go To Section One</a>
<a class="scroll_to" data-more-info="section_two">Go To Section Two</a>
<a class="scroll_to" data-more-info="section_three">Go To Section Three</a>
</div>

<div id="section_one" class="section">
   Section One
</div>

<div id="section_two" class="section">
   Section Two
</div>

<div id="section_three" class="section">
   Section Three
</div>

CSS

div.link_wrapper{
    position:fixed;
    top:5px;
    
}

a.scroll_to{
    color:#f00;
    cursor:pointer;
    display: inline-block;
    border:1px solid #ccc;
    padding:2px 5px;
    background-color:#fff;
}

div.section{
    height:600px;
    margin:50px 0 0 0;
}

div#section_one{
    background-color:#ccc;   
}

div#section_two{
    background-color:#8493CA;   
}

div#section_three{
    background-color:#C4DF9B;   
}

JavaScript

$("a.scroll_to").click(function() {
  var target = $(this).attr("data-more-info");
  $("html, body").animate({ scrollTop: $("#"+target).offset().top - 50 }, "slow");
  return false;
});