Jumper (Jump Anywhere)

Jumper provides an optional integration with Jump.js (a small, modern, dependency-free smooth scrolling library), or fallback to native smooth scroll if the library is not installed.

Be sure to check Out of the block option at block admin if having a complex design and or having trouble with layering/ positioning.

Features

• Vanilla JS, no jQuery required.
• A`Jump to Top` or `Jump Anywhere` block which can be placed via block admin.
• Jump anywhere for extra configurable links (menu items, CTA, etc.) with hashes (#), as seen at a single page website aka SPA.
• 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.

Features since 1.2

• FontAwesome or Icon API integration via custom icon class.
• Option to place jumper out of the block to overcome theme issues such as conflicting fixed positioning, etc.

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.

Optional Requirements

• Jump library, optional since Jumper 1.2:
  /libraries/jump/dist/jump.min.js,
  the RAF polyfill was included at the latest library version.
  If not installed, Jumper will use browsers native smooth scrolling capability.

Note:

• Compatibility with Ultimenu has been added at Ultimenu 2.4, just be sure to provide non-fixed off-canvas element for Jumper target as noted in the form description.

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 smooth scrolling or fallback to Jump.js with 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, superseded by Splide.

Read more.