Single Page Traversal jQuery Plugin

CodeCanyon Single Page Traversal jQuery Plugin 5454079
Script \ JavaScript \ Navigation
Plugin \ Single \ Previous \ Sections \ Button \ Section \ Minimized \ Traversal

JavaScript - Single Page Traversal jQuery Plugin 5454079 by Fisu @ CodeCanyon

Script \ JavaScript \ Navigation

If you have a single page website, or even a regular site with long pages, then you probably want the ability to scroll through the sections of the page with a single next/previous button combination. To implement such a button yourself would mean calculating where the user currently is on the page, what the next and previous sections are, taking into account items such as a fixed header, catering for the section heights changing on screen resize, etc. Single page traversal plugin does all this for you, and all in a tiny 2Kb minimized file.

Single page traversal plugin allows you to easily move between sections of a website. Once the plugin is included on your page, it can be as simple as a single line to call the plugin, give classes to your previous and next buttons, then you can cycle through your site’s sections. You can even have a ‘start of current section’ link if you wish.

To ensure the plugin runs as efficiently as possible, the section offset amounts are worked out on page load, and when the window size changes. Therefore, there are no heavy calculations to do when the next or previous buttons are pressed; meaning fast and responsive site navigation.

The plugin is also highly customizable and even has an API for controlling its functions elsewhere in your script. Both the minimized plugin, along with the fully commented version, are included, as well as the HTML version of the instructions. Works with all modern browsers and Internet Explorer 8+. Also has been fully tested on iOS, including iPhone and iPad.

View examples and see how simple it is to set up at tommyfisher.net/sptraversal .

Last Update: 8 September 13; Compatible Browsers: IE8, IE9, IE10, Firefox, Safari, Opera, Chrome; Files Included: JavaScript JS, HTML; Software Version: jQuery.

Keywords: backward, button, current, forward, link, nav, navigation, next, previous, scroll, scrolling, single page.