jQuery scroll to navigation menu plugin – jumpTo

JumpTo is a jQuery scroll to navigation menu plugin, for auto-generating “jump to” navigation menu, based on heading tags, that allows the user to scroll to any HTML page place, with a smooth scrolling effect.

jQuery scroll to navigation menu plugin

A plugin that let us create a smooth jump to sub navigational menu in one JavaScript. By using CSS the smart navigation menu item will be highlighted to let the user know what they are currently viewing on the page.

Cross browser solution.

Usage

We can create a jump to sub navigational menu automatically with 1 line of JS call. The menu can be used to assist your navigation for pages with a lot of content.

Simply include the latest jQuery library together with jquery.jumpto.js, and jumpto.css into document, and make sure your content have a mark up that matches the structure below:

<div class="page_container">
  <div class="jumpto-block">
    <h2>Header 1</h2>
    <h3>SubHeader 1</h3>
    ....
    <h3>SubHeader 2</h3>
    ....
  </div>
  <div class="jumpto-block">  
    <h2>Header 2</h2>
    <h3>SubHeader 1</h3>
    ...
  </div>
</div>

All we need is simply wrap everything with a container, in this case I wrapped it with a ‘page_container’, and make sure you wrap each section with another div, in this case it’s the ‘jumpto-block’ div.

These ‘jumpto-block’ will let the plugin knows how many first level links it should show on the menu.

Demo:

http://www.thepetedesign.com/demos/jumpto_demo.html

GitHub:

https://github.com/peachananr/jumpto

Jump to Enjoy!