# 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

GitHub npm

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.0"></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">