Smooth Scroll

A lightweight script to animate scrolling to anchor links, providing a smoother experience for navigating one-page sites or long landing pages.

About the Plugin

GitHubnpm

Provides an animation layer to handle smoothly scrolling in-page links. Simply add data-smooth-scroll to any in-page link.

Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.

  1. Include the library in your page

    • Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted after jquery.js and before theme.js.

      <!-- Smooth scroll (animation to links in-page)-->
<script type="text/javascript" src="assets/js/smooth-scroll.polyfills.min.js"></script>

      Alternatively you may wish to load this resource from a CDN to potentially improve page load times.

      <!-- Smooth scroll (animation to links in-page)-->
<script type="text/javascript" src="https://unpkg.com/smooth-scroll@~16.1.3"></script>
  2. Load the initializer code in index.js
    • Declare the following import statement in js/mrare/index.js. This ensures that the initializer code is included in the theme.js bundle.
      import './smooth-scroll';

Basic Usage

Add attribute data-smooth-scroll to any in-page link and it will be handled by the Smooth Scroll plugin.

<a data-smooth-scroll href="#section-on-this-page">In-page link</a>

Offset

Sometimes it is necessary to provide an offset in case the nav bar interferes with the scroll position.

Set the scroll offset by adding data-smooth-scroll-offset to the <body> tag.

The value provided is interpreted in pixels.

A positive value will leave a gap between the viewport top and the destination anchor.

<body data-smooth-scroll-offset="73">