Smooth Anchor Scrolling
This script was written by Matt Litherland @mattsince87
HTML
<nav class="nav">
<div class="padded">
<ul>
<li><a id="link1" href="#section1">S1. Info</a>
</li>
<li><a id="link2" href="#section2">Section 2</a>
</li>
<li><a id="link3" href="#section3">Section 3</a>
</li>
<li><a id="link4" href="#section4">Section 4</a>
</li>
</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...
JavaScript
// ------------------------------
// http://twitter.com/mattsince87
// ------------------------------
function scrollNav() {
$('.nav a').click(function() {
//Animate
$('html, body').stop().animate({
scrollTop: $($(this).attr('href')).offset().top - 160
}, 800);
return false;
});
$('.scrollTop a').scrollTop();
}
scrollNav();