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

Category: Animation , Javascript | December 10, 2019
Views Total:4,051 views
Official Page:Go to website
Last Update:December 10, 2019


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


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 id="two">
  <h2>Section two</h2>
<div id="three">
  <h2>Section three</h2>

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>

You Might Be Interested In:

Leave a Reply