JQuery Scroll Indicator Bullets

A JQuery plugin to create a scroll indicator bullet navigation on the right side of the screen.

Requirements

Usage

The plugin creates bullets for all matching DOM elements that contain an ID. The order of the bullet points reflects the order of the elements in the DOM. Therefore the plugin works best with a set of vertically stacked divs.

$('div.page-section').scrollIndicatorBullets();

Options

An object defining a number of the following options may be passed to the plugin:

  • titleSelector - String [null]

    A Selector to retrieve the element's title. The textual content of the first element in the selection is displayed next to the bullet on mouseover.

  • scrollDuration - int [400]

    Duration in ms of the scroll animation.

  • touchTitleDelay - int [500]

    Delay in ms for showing the titles on touch devices.

  • scrollOffset - int [50]

    The offset from the top of the screen to the scrolled section when clicking on the bullet.

  • waypointOffsetDown - int [window.innerHeight/3]

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

  • waypointOffsetUp - int [50]

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

  • pgKeysEnabled - boolean [true]

    Should pageUp and pageDown keys trigger the jumps inside the navigation?

$('div.page-section').scrollIndicatorBullets({
  titleSelector: '.title,.subtitle'
});

API

The plugin returns an object with a set of functions:

var scrollIndicatorApi = $('div.page-section').scrollIndicatorBullets();

$('.scroll-button').click(function () {
  scrollIndicatorApi.scrollToNext();
});

Demo

In order to create this demo I added a few .scroll-section classes, some ids, such as the following JS snippet:

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