Smooth Scroll Position Indicator Plugin For jQuery

File Size: 16.2 KB
Views Total: 8046
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Smooth Scroll Position Indicator Plugin For jQuery

Scroll Indicator Bullets is a jQuery plugin for smooth one page scrolling website that generates a side navigation to indicate the user's current scroll position and allows for scrolling smoothly between sectioned content by clicking on the bullets.

How to use it:

1. Add CSS class 'scroll-section' to your page sections. Don't forget to add anchor links to your heading tags. The plugin will automatically use text wrapped in the heading tags as labels for navigation bullets when mouse hover.

<div id="section-1" class="scroll-section">
  <h1>
    <a id="section-1" class="anchor" href="#section-1" aria-hidden="true">
      <span aria-hidden="true"></span>
    </a>
    Section One</h1>
</div>

<div id="section-2" class="scroll-section">
  <h2>
    <a id="section-2" class="anchor" href="#section-2" aria-hidden="true">
      <span aria-hidden="true"></span>
    </a>
    Section Two</h2>
</div>

<div id="section-3" class="scroll-section">
  <h2>
    <a id="section-3" class="anchor" href="#section-3" aria-hidden="true">
      <span aria-hidden="true"></span>
    </a>
    Section Three</h2>
</div>

2. Include the required style sheet jquery.scrollindicatorbullets.css in the head section of the webpage.

<link href="jquery.scrollindicatorbullets.css" rel="stylesheet">

3. Include jQuery library and other resources at the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="jquery.waypoints.min.js"></script>
<script src="jquery.scrollindicatorbullets.js"></script>

4. Call the function and we're done.

$(function () {
  $('.scroll-section').scrollIndicatorBullets({
    titleSelector: 'h1,h2'
  });
});

5. Default plugin settings.

$(function () {
  $('.scroll-section').scrollIndicatorBullets({

    // Selector(s) to retrieve the element's title.
    titleSelector: null,

    // Duration in ms of the scroll animation.
    scrollDuration: 400,

    // Delay in ms for showing the titles on touch devices.
    touchTitleDelay: 500,

    // The offset from the top of the screen to the scrolled section when clicking on the bullet.
    scrollOffset: 50,

    // When scrolling down: A section becomes active as soon as the top of the block is this far up the screen.
    waypointOffsetDown: window.innerHeight / 3,

    // When scrolling up: A section becomes active as soon as the top of the block is this far down the screen.
    waypointOffsetUp: 50,

    // Should pageUp and pageDown keys trigger the jumps inside the navigation.
    pgKeysEnabled: true
  });
});

6. API methods.

// Scroll to the next section if there is one.
scrollToNext();

// Scroll to the previous section if there is one.
scrollToPrev(); 

Change log:

v2.0.0 (2016-08-19)

  • Make the plugin AMD compatible.
  • Use the "no framework" verison of Waypoints instead of the jquery version (because the jquery version is not AMD compatible).

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