Smooth Anchor Scrolling

This script was written by Matt Litherland @mattsince87

by Michael Mandarino

HTML

<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>
   ...

CSS

@import url(http://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:...