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
   
jQuery Tooltips Navigation For One Page Scrolling Website - scrollTips

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 scrollTips
  • title: $("h1"): selector for title to clone and create scrollTip names
  • exclude: $("#intro"): selector that will be excluded from scroolTip
  • smoothscroll: 500: time (ms) to navigate between sections
  • onCreate: function(){}: callback init
  • onSection: 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.