<nav class="nav">
  <div class="padded">
    <ul>
      <li class="active"><a id="link1" class="nav-section1" href="#section1">S1. Info</a></li>
      <li><a id="link2" class="nav-section2" href="#section2">Section 2</a></li>
      <li><a id="link3" class="nav-section3" href="#section3">Section 3</a></li>
      <li><a id="link4" class="nav-section4" href="#section4">Section 4</a></li>
      <li class="scrollTop"><a href="#"><span class="entypo-up-open"></span></a></li>
    </ul>
  </div>
</nav>

<article>
  <h1 id="section1">1. Info</h1>
  <p>I have written the <b>Smooth Anchor Scrolling</b> to improve the weight of your callbacks. I was using Twitter's Bootstrap 3.0 when i wrote this and i'm surprised they haven't yet built anything in. Alas! I have written a super lightweight smooth scroll plugin free for you all to use. I have deliberately <b>not included</b> a plugin such as Scrollspy as i built this for use with Bootstrap that already has Scrollspy within.</p>

  <p><span class="nav"><a class="nav-section4" href="#section4">Go to Section 4</a></span></p>
</article>

<article>
  <h1 id="section2">S2. Compatibility</h1>
  <p>Currently works well on <b>all modern browsers</b> such as recent versions of <b>Chrome, Safari, Opera, Firefox and IE10+</b>. I have also tested this on current mobile operating systems such as <b>iOS6, iOS7, Jellybean and BlackBerry's OS 10 Software</b>.</p>
  <p>Despite not being tested in previous versions of Internet Explorer i have full-faith that it will work back to <b>IE7</b> and it's predecessor as it's leveraging <b>jQuery</b> functions such as <code>.animate</code>, <code>.closest</code> and others. See the Editor view for full code.
  </article>

<article>
  <h1 id="section3">S3. GitHub</h1>
  <p>The current version of the code is maintained on <b>GitHub</b>, this could be an old version!</p>
  <p>GitHub: <a href="https://github.com/mattsince87/smooth-scrolling">https://github.com/mattsince87/smooth-scrolling</a></p>
</article>

<article>
  <h1 id="section4">S4. Credits</h1>
  <p>This script was written by Matt Litherland @mattsince87 and is intended for public use. please <b>do not</b> sell this script as an individual product. It may be included in your projects that are sold as an entire website or application.</p>
  <p>If you like it then follow me on Codepen @mattsince87 and Twitter @mattsince87</p>
</article>



<br/ >
<br/ >
<br/ >
<br/ >
<br/ >
<br/ >
<br/ >
<br/ >
<br/ >
<br/ >
<br/ >
<br/ >
<br/ >
<br/ >
<br/ >
<br/ >
<br/ >
<br/ >
<br/ >
<br/ >
<br/ >
@import url(https://fonts.googleapis.com/css?family=Exo:200,500);
@import "http://weloveiconfonts.com/api/?family=entypo";

[class*="entypo-"]:before {
  font-family: "entypo", sans-serif;}

html, body {
  background: #fff;
  padding: 60px 15px;
  color: #777;}

ol {
  margin-bottom: 50px;}

h1 {
  letter-spacing: -0.05em;
  font-family: "Exo", sans-serif;
  color: #3f5b80;}

p {
  font-family: "Open Sans", sans-serif;
  line-height: 1.5em;
  margin-bottom: 10px;
  font-size: 16px;
  padding: 0;
  &:last-child {
    margin-bottom: 40px;}
  }

code {
  background: #f8f8f8;
  color: #d64f9b;
  border: 1px solid #eee;
  padding: 2px;
  border-radius: 3px;}

a {
  color: #f46830; 
  &:hover {
    color: #4fb3e8;
    -webkit-transition: all .1s ease-in-out;
       -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
         -o-transition: all .1s ease-in-out;
            transition: all .1s ease-in-out;
  }
  text-decoration: none;}

nav {
  float: left;
  width: 100%;
  top: 0;
  left: 0;
  background: #3b5a77;
  position: fixed;}

  nav .padded {
    padding: 30px;}

ul {
  float: left;
  width: 100%;
  margin: 0 0 30px 0; /*Padding Fix*/
  padding: 0;}

ul li {
  float: left; 
  display: inline; 
  margin-right: 0px;
  &:nth-child(even) a {
    background: #4a6c8c ;
  }
  list-style: none;}

ul li a {
  display: block;
  padding: 20px;
  font-family: "Exo", sans-serif;
  font-weight: 200;
  background: #6788a7;
  &:hover {
    color: #fff;
    background: #e6764e;
    -webkit-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
         -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
  }
  color: #fff;
  text-decoration: none;}

ul li.active a {
  background: #58c7d0 ;}

// scrollTop Styles
ul li.scrollTop {
float: right;}
// ------------------------------
// https://twitter.com/mattsince87
// ------------------------------

function scrollNav() {
  $('.nav a').click(function(){  
    //Toggle Class
    $(".active").removeClass("active");      
    $(this).closest('li').addClass("active");
    var theClass = $(this).attr("class");
    $('.'+theClass).parent('li').addClass('active');
    //Animate
    $('html, body').stop().animate({
        scrollTop: $( $(this).attr('href') ).offset().top - 160
    }, 400);
    return false;
  });
  $('.scrollTop a').scrollTop();
}
scrollNav();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js