Jumper provides a simple integration with <a href="https://github.com/callmecavs/jump.js">Jump.js</a>, a small, modern, dependency-free smooth scrolling library.


<h2>Features</h2>
<ul>
  <li>Vanilla JS, no jQuery required.</li>
  <li>Uses requestAnimationFrame, natively performant.</li>
  <li>A`<strong>Jump to Top</strong>` or `<strong>Jump Anywhere</strong>` block which can be placed via block admin.</li>
  <li>Jump anywhere for extra configurable links, as seen at a single page website.</li>
  <li>A few basic sensible styling. Use your own CSS to position the block as needed.</li>
</ul>


<h2>Requirements</h2>
<ul>
  <li>Core block.module.</li>
  <li><a href="https://drupal.org/project/blazy">Blazy</a>,
No Blazy lazy load library is needed. However Blazy is required to reduce dups for jQuery replacement methods provided by Blazy separately.</li>
  <li>Jump library:
  o Download Jump from https://github.com/callmecavs/jump.js
  o Extract it as is, rename "jump.js-master" to "jump", so the assets are at:

    <em>/libraries/jump/dist/jump.min.js</em></li>
</ul>


<h2>Optional Requirements</h2>
If you need to support old browsers (IE9), include requestAnimationFrame polyfill yourself into your own custom libraries from any below:
<ul>
  <li>https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/</li>
  <li>https://gist.github.com/paulirish/1579671</li>
</ul>

<strong>Note</strong>: IE10+ supports rAF, no need to include it.


<h2>Installation</h2>
Install the module as usual:
  Visit <em>admin/modules</em>, and enable the Jumper module.

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

<h2>Usages</h2>
<ul>
  <li>Visit <em>/admin/structure/block</em>
  Place the provided Jumper block into footer, or any relevant region.</li>
  <li>Adjust a few settings accordingly, including custom jump links.</li>
</ul>


<h2>Custom Usages</h2>
<ol>
  <li>Add a class `<code>jumper</code>` to any link / button element containing attributes <code>[data-target]</code>, or <code>[href]</code> with relevant target to scroll to, e.g.:
   <code>&lt;a href="#main" class="jumper"&gt;Jump&lt;/a&gt;</code>

     or

    <code>&lt;a href="#" data-target="#main" class="jumper"&gt;Jump&lt;/a&gt;</code>

     or

    <code>&lt;button data-target="#main" class="jumper"&gt;Jump&lt;/button&gt;</code>
  </li>
  <li>Include the provided block via block admin, or load the `jumper/load` library
   as needed accordingly.
  </li>
  <li>To position the Jumper block anywhere, use a simple CSS override, e.g.:

<code><pre>
   /** Position the Jumper block at the bottom left corner. */
   .jumper.jumper--block {
     &nbsp;&nbsp;left: 15px;
   }

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

  .is-jumper-visible .jumper.jumper--block {
    &nbsp;&nbsp;-ms-transform: translateX(-50%) translateY(0);
    &nbsp;&nbsp;transform: translateX(-50%) translateY(0);
  }
</pre></code>

   By default, Jumper block is positioned at the bottom right.
  </li>
</ol>

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


<h2>Related modules</h2>
<ul>
  <li>http://drupal.org/project/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. Persuading existing module to depend on Blazy is more likely out of question than creating a new one in the same direction as Blazy.</li>
  <li>https://www.drupal.org/sandbox/gausarts/lory
Lory module may need jumper.module for its optional feature: <code>arrowDown</code>.</li>
</ul>

<h2>Known Issues</h2>
The `jumper` namespace is because `jump` is already reserved by `<a href="https://www.drupal.org/project/jump">jump</a>` menu module for different purposes. However `jumper` is still based on original jump.js intended singleton. Why not `jumpjs`, or `jumpingjackflash`? Maybe, but the author said: "... naming it according to your preference".