Jumper (Jump Anywhere)

Jumper provides a simple integration with Jump.js, a small, modern, dependency-free smooth scrolling library.

Features

• Vanilla JS, no jQuery required.
• Uses requestAnimationFrame, natively performant.
• A`Jump to Top` or `Jump Anywhere` block which can be placed via block admin.
• Jump anywhere for extra configurable links, as seen at a single page website.
• A few basic sensible styling. Use your own CSS to position the block as needed.
• Supports optional Views Load More auto-loading by scrolling which is related to the Jumper's job.

Requirements

• Core block.module.
• Blazy,
  No Blazy lazy load library is needed. However Blazy is required to reduce dups for jQuery replacement methods provided by Blazy separately.
• Jump library:
  • Download Jump library
  • Extract it as is, rename "jump.js-master" to "jump", so the assets are at:
    /libraries/jump/dist/jump.min.js

Optional Requirements

If you need to support old browsers (IE9), include requestAnimationFrame polyfill yourself into your own custom libraries from any below:

• https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
• https://gist.github.com/paulirish/1579671

Note: IE10+ supports rAF, no need to include it.
Read more to decide if it is worth to support old IE:
Support for older versions of Internet Explorer ended

Installation

Install the module as usual:
Visit admin/modules, and enable the Jumper module.

More info can be found on:
http://drupal.org/documentation/install/modules-themes/modules-7

Usages

• Visit admin/structure/block
  • Place the provided Jumper block into footer, or any relevant region.
  • Adjust a few settings accordingly, including custom jump links.
• Visit any menu, e.g.: /admin/structure/menu/manage/main
  • Edit any menu item to make it behave as a jumper
  • Under Link autocomplete field, add a menu item containing a hash sign (#) targeting the HTML element ID for any particular page, e.g.:
    /about#block-cta, or <front>#block-contact

Custom Usages

1. Add a class `jumper` to any link / button element containing attributes [data-target], or [href] with relevant target to scroll to, e.g.:
<a href="#main" class="jumper">Jump</a>

or

<a href="#" data-target="#main" class="jumper">Jump</a>

or

<button data-target="#main" class="jumper">Jump</button>

2. Include the provided block via block admin, or load the `jumper/load` library
as needed accordingly.

3. To position the Jumper block anywhere, use a simple CSS override, e.g.:

  /** Position the Jumper block at the bottom left corner. */
   .jumper.jumper--block {
     left: 15px;
   }

   /** Or center it at the bottom of page. */
   .jumper.jumper--block {
     left: 50%;
     right: auto;
     -ms-transform: translateX(-50%) translateY(100%);
     transform: translateX(-50%) translateY(100%);
   }

  .is-jumper-visible .jumper.jumper--block {
    -ms-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
  }

By default, Jumper block is positioned at the bottom right.

Stylings

The styling is very basic. Use your own icons and CSS to override defaults. Specific to the provided block, it has additional class `jumper--block` with a particular styling for a single jumper block.

Related modules

• Back to Top
  Differences: Jumper doesn't use jQuery, nor jQuery UI. It uses native requestAnimationFrame, core block for placement, and can be used to jump anywhere with configurable links for smooth scrolling.
• Lory
  Lory module may need jumper.module for its optional feature: arrowDown.

Read more.