jQuery Tooltips Navigation For One Page Scrolling Website - scrollTips
File Size: | 13.8 KB |
---|---|
Views Total: | 2544 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
scrollTips is a jQuery plugin to generate side tooltips which allow you to smoothly navigate between different sections on your one page scrolling website. Also can be used to indicate which section you currently stay in.
How to use it:
1. Load the jquery.scrollTips.min.css
in the head of your document.
<link rel="stylesheet" href="dist/jquery.scrollTips.min.css">
2. Load jQuery library and the jQuery scrollTips plugin at the end of the document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="dist/jquery.scrollTips.min.js"></script>
3. The Html markup to build a one page scrolling webpage. The plugin will automatically create tooltips from <h1> tag or any other Html elements specified in the options.
<div id="content"> <section id="first"> <h1>First section</h1> </section> <section id="second"> <h1>Second section</h1> </section> <section id="third"> <h1>Third section</h1> </section> </div>
4. Enable the plugin by calling the function on parent element.
$("#content").scrollTips(OPTIONS)
6. Available options.
container: $("section")
: selector for each section to clone and create scrollTipstitle: $("h1")
: selector for title to clone and create scrollTip namesexclude: $("#intro")
: selector that will be excluded from scroolTipsmoothscroll: 500
: time (ms) to navigate between sectionsonCreate: function(){}
: callback initonSection: function(){}
: callback each section changes
This awesome jQuery plugin is developed by juanbrujo. For more Advanced Usages, please check the demo page or visit the official website.