1) jQuery SmartScroll Plugin

This plugin is thought for one page website. When enabled it adds a smooth smart scroll navigation to a single page site.
This web page is a live example.
Navigation arrows to scroll to previous and next section are enable by default and the scroll to top button too.

The main code you need is to split your page into sections(subpages). Each section must have a class .section and the anchor id.

For the main navigation all you need is a wrapper div or nav with the class .smartscroll-nav and inside it all the anchors must have a .scroll class and the href attribute that points to the section id

You can set optionally controls arrows wrapped in a container div with a classed named .smartscroll-controls and with inside the two anchor with the .scroll class and the respective .prev and .next classes.

Here is the sample code.

          <nav class="smartscroll-nav">
            <ul>
              <li><a href="#one" class="scroll">ONE</a></li>
              <li><a href="#two" class="scroll">TWO</a></li>
              <li><a href="#three" class="scroll">THREE</a></li>
              <li><a href="#four" class="scroll">FOUR</a></li>
              <li><a href="#five" class="scroll">FIVE</a></li>
            </ul>
          </nav>

              <div id="one" class="section">
                place your content here
              </div>

              <div id="two" class="section">
                place your content here
              </div>

              <div id="three" class="section">
                place your content here
              </div>

              <div id="four" class="section">
                place your content here
              </div>

              <div id="five" class="section">
                place your content here
              </div>

          <nav class="smartscroll-controls">
            <a href="#" class="prev scroll"></a>
            <a href="#" class="next scroll"></a>
          </nav>

          <a href="#" class="smartscroll-totop"></a>

All you need to activate the plugin is to call it before the end of body tag

          <script>
            $(document).smartscroll();
          </script>

2) Usage

Options

Name	type	default	description
section	string	.section	The class name to be applied to each section wrapper.
anchor	string	.scroll	The class name to be applied to make the navigation link enabled with the smart scroll effect.
fullscreen	boolean	false	Size each section to have the window dimensions
activelink	string	.active	The class name to be applied for having the current navigation link selected
nav	boolean	true	Enabled by default to show the main navigation bar
controls	boolean	true	Enabled by default to see the control arrows
totop	boolean	true	Enabled by default to show the back to top button
speed	number	1000	The smart scroll effect speed between sections
totopspeed	number	1000	The back to top speed

Example to simulate the default behaviour

        <script>
          $(document).smartscroll(
              {
                section: '.section', 
                anchor: '.scroll', 
                fullscreen: true, 
                activelink: '.active', 
                nav: true, 
                controls: true, 
                totop: true, 
                speed: 1000, 
                totopspeed: 1000
              }
          );
        </script>

3) Ready to be integrated with Twitter Bootstrap and Zurb Foundation

jQuery SmartScroll Plugin is easy to be integrated with the most famous responsive framework. The way to use it is the same as explained in the first section.

Just have a look at the examples: Twitter Bootstrap, Zurb Foundation

Customization

This page include a white.css theme as example to render the main navigation bar, control arrows and back to top button.
It can be used as it is or can be a starting point to customize on your needs.

For Bootstrap and Zurb example a default.css theme is included just to customize only the control arrows and back to top button because these frameworks already have a custom navigation bar.

Support

For questions and support write to rwm AT resposnivewebmobile DOT com