<p>When appropriate, I am a fan of the one-page sites. I really like the ones that add smooth scrolling and highlight the navigation depending upon which part of the page you have scrolled to. Here are a few examples: <a href="http://www.brizk.com/">Brizk Design</a> and <a href="http://crushlovely.com/">Crush + Lovely</a>. I finally have a freelance project where a one-page site makes sense, so I needed to write the JavaScript to make the navigation work how I wanted.</p>

<p>I wanted the page to scroll smoothly when the navigation was clicked, so I used the <a href="http://flesler.blogspot.com/2007/10/jqueryscrollto.html">jQuery ScrollTo plugin</a>. I also wanted the page to automatically highlight the correct navigation section depending upon which section was scrolled to, and that was where I added my custom code.</p>

<p>If you want to skip ahead, you can <a href="//trevor-davis.com/play/jquery-one-page-nav/">check out the demo</a> and <a href="http://github.com/davist11/jQuery-One-Page-Nav">download the plugin from GitHub</a>.</p>

<h2>The Markup</h2>
<p>I started with an unordered list for the navigation and a bunch of sections:</p>
<pre><code>&lt;ul id="nav"&gt;
  &lt;li class="current"&gt;&lt;a href="#section-1"&gt;Section 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#section-2"&gt;Section 2&lt;/a&gt;&lt;/li&gt;
  &lt;li"&gt;&lt;a href="#section-3"&gt;Section 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div id="section-1"&gt;
  &lt;strong&gt;Section 1&lt;/strong&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
&lt;/div&gt;
&lt;div id="section-2"&gt;
  &lt;strong&gt;Section 2&lt;/strong&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
  incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
&lt;/div&gt;
&lt;div id="section-3"&gt;
  &lt;strong&gt;Section 3&lt;/strong&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
  incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
&lt;/div&gt;</code></pre>

<h2>The JavaScript</h2>
<p>Then, I added jQuery, the ScrollTo plugin, and my plugin to the page:</p>
<pre><code>&lt;script src="jquery.js"&gt;&lt;/script&gt;
&lt;script src="jquery.scrollTo.js"&gt;&lt;/script&gt;
&lt;script src="jquery.nav.min.js"&gt;&lt;/script&gt;</code></pre>

<p>Finally, I just need to call my plugin on the navigation:</p>
<pre><code>$(document).ready(function() {
  $('#nav').onePageNav();
});</code></pre>

<h3>Options</h3>
<p>There are a few options for this plugin:</p>
<ul><li>
<h4>currentClass: 'current'</h4>
Class to add to the list item when the navigation item is selected
</li>
<li>
<h4>changeHash: false</h4>
If you want the hash to change when the user clicks on the navigation, change this to <strong>true</strong>
</li>
<li>
<h4>scrollSpeed: 750</h4>
Speed to scroll the page when the navigation is clicked
</li>
</ul><p>And that’s it. <a href="//trevor-davis.com/play/jquery-one-page-nav/">Check out the demo</a> and <a href="http://github.com/davist11/jQuery-One-Page-Nav">download the plugin from GitHub</a>.</p>