Smoothly Scroll The Page To Anchors With Offset – Scroll To Anchor

Preview:

Description:

Yet another smooth scroll JavaScript library that smoothly scrolls the page to specific anchors with offsets in the document.

How to use it:

1. Import the Scroll To Anchor library into the document.

<script src="dist/scrolltoanchor.js"></script>

// or
import ScrollToAnchor from './dist/scrolltoanchor.esm.js';

2. Initialize the ScrollToAnchor library.

var smoothScroll = new ScrollToAnchor();

3. Create anchor links pointing to the specific contents within the document.

<a href="#one">One</a>
<a href="#two">Two</a>
<a href="#three">Three</a>
<div id="one" tabindex='1'>
  <h2>Section one</h2>
</div>
<div id="two">
  <h2>Section two</h2>
</div>
<div id="three">
  <h2>Section three</h2>
</div>

4. Set the duration of the scroll animation. Default: 800ms.

var smoothScroll = new ScrollToAnchor({
    duration: 1000
});

5. Set the distance from the top after scrolling.

var smoothScroll = new ScrollToAnchor({
    offset: 70
});

6. You’re also allowed to specify the offset in the data-anchor-offset attribute.

<div id="two" data-anchor-offset="100">
  <h2>Section two</h2>
  <p>data-anchor-offset="100"</p>
</div>