Pure JS Smooth Scroll Library For Single Page Application – pfSmoothScroll

Preview:

Description:

pfSmoothScroll is a tiny (~4kb unminified) JavaScript library which enables the anchor links to scroll smoothly through the sectioned content inside your single page web application.

How to use it:

Place the pfSmoothScroll.js script at the end of the html document.

<script src="js/pfSmoothScroll.js"></script>

Add anchors with unique names to your page sections.

<div class="section-1">
  <a name="1"></a>
  ...
</div>
<div class="section-2">
  <a name="2"></a>
  ...
</div>
<div class="section-3">
  <a name="3"></a>
  ...
</div>

Create an html list and add the CSS class ‘anchor-js’ to the li elements. Then insert links pointing to the specified page sections into the html list.

<ul>
  <li class="anchor-js"><a href="#1">First</a></li>
  <li class="anchor-js"><a href="#2">Second</a></li>
  <li class="anchor-js"><a href="#3">Third</a></li>
</ul>

Initialize the pfSmoothScroll when DOM loaded.

document.addEventListener('DOMContentLoaded', function() {
  var smoothAnchor = new SmoothAnchor();
});

Change the default duration of scrolling.

new SmoothAnchor({
    duration : 500
});

Change the default easing of scrolling.

new SmoothAnchor({
    easing : "linear"
});