jQuery Plugin For Scroll To Navigation Menu - jumpto

jumpto is a jQuery plugin for automatically generating a 'Jump To' navigation menu based on heading tags that allow the user to scroll to any html content with a smooth scrolling effect. By using CSS the smart navigation menu item will be highlighted to let the user know what they are currently viewing on the page.

See also:

• Lightweight jQuery Scroll To HTML Elements Plugin - Arbitrary Anchor
• Simple jQuery Animated Scroll To Plugin - Animate Scroll
• jQuery Simple Scroll To Plugin - scrollomatic
• jQuery Plugin For Sticky Top Navigation Menu - stickUp

Basic Usage:

1. Include the required jumpto.css in the head section of your document.

<link href="jumpto.css" rel="stylesheet" type="text/css">

2. Markup Html Structure.

<div class="main">
<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>

3. Include the latest version of jQuery library and jQuery jumpto plugin at the end of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.jumpto.js"></script>

4. Call the plugin with options.

<script>
$(document).ready( function() {
$(".main").jumpto({
firstLevel: "> h2",
secondLevel: "> h3"
});
});
</script>

5. All the default options.

<script>
$(document).ready( function() {
$(".main").jumpto({
firstLevel: "> h2", // You can define which tag will represent your first level header. The default value is the <h2> tag. Any <h2> tag will automatically be used as a first level link in the menu.
secondLevel: false, // We also support submenu. Like above, you can define the selector for the second level header to be used in the submenu. Default is false.
innerWrapper: ".jumpto-block", // In case you want to switch the section wrapper class name to something else
offset: 400, // You can define how many pixels until the jump to menu starts to follow you on scroll. Default is 400 pixels.
animate: 1000, // You can define how fast/slow the page will scroll when the jump to menu is clicked. Set to false to turn off animation.
navContainer: false, // If you want to place your jump to menu somewhere else, simply add a selector to your predefined jump to menu container here. The default is false and it will automatically be generated.
anchorTopPadding: 20, // This option let you set the top padding when the jump to menu is clicked. This will let you control the space between your header and the top of the page. Default is 20 pixels.
showTitle: "Jump To", // You can customize the title of the jump to menu here. Set to false if you want to hide the title
closeButton: true // You can choose to show/hide the close button by toggling this to true/false respectively
});
});
</script>

---

This awesome jQuery plugin is developed by peachananr. For more Advanced Usages, please check the demo page or visit the official website.