Animate Scrolling To Anchor Links – scrollToSmooth

Category: Animation , Javascript | August 1, 2020
Author: bfiessinger
Views Total: 136 views
Official Page: Go to website
Last Update: August 1, 2020
License: MIT

Preview:

Animate Scrolling To Anchor Links – scrollToSmooth

Description:

Just another pure JS smooth scroll library to animate the page scrolling to specified anchor links, with or without easing functions.

Works with sticky navigation bar. Perfect for site navigation on the long web page.

To learn more about Smooth Scroll, check out our 10 Best Smooth Scroll JavaScript Plugins.

How to use it:

1. Load the main JavaScript scrolltosmooth.js right before the closing body tag.

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

2. Create anchor links pointing to related positions of the webpage.

<nav>
  <a href="#section-1">Section 1</a>
  <a href="#section-2">Section 2</a>
  <a href="#section-3">Section 3</a>
  <a href="#section-4">Section 4</a>
  <a href="#section-5">Section 5</a>
</nav>

3. Initialize the scrollToSmooth library on the anchor links and done.

var smoothScroll = new scrollToSmooth('a')
smoothScroll.init();

4. Set the duration of the animation. Default: 400ms.

var smoothScroll = new scrollToSmooth('a',{
    duration: 500
})

5. Apply an easing function to smooth scrolling. Available easing functions:

  • linear
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce
var smoothScroll = new scrollToSmooth('a',{
    easing: "linear"
})

6. Execute a callback function after the scrolling has finished.

var smoothScroll = new scrollToSmooth('a',{
    callback: function () { 
      console.log('we reached it!'); 
    }
})

7. Set the selector of sticky header.

var smoothScroll = new scrollToSmooth('a',{
    fixedHeader: '#yourSelector'
})

8. Customize the attribute to determine the target element.

var smoothScroll = new scrollToSmooth('a',{
    targetAttribute: "href"
})

Changelog:

v2.2.1 (08/01/2020)

  • Bugfixes

v2.2.0 (07/25/2020)

  • Refactor codebase in TypeScript
  • Overall Code improvements
  • Fixed a bug where the Scrollposition would be calculated wrong if transforms are used (caused errors with libraries like AOS)

v2.1.5 (05/16/2020)

  • Fixed: font-awesome icons not working with anchor href targetAttribute.

You Might Be Interested In:


Leave a Reply