Author: | LukeCarlThompson |
---|---|
Views Total: | 4,018 views |
Official Page: | Go to website |
Last Update: | December 10, 2019 |
License: | MIT |
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>