We Be Scrollin

December 8, 2020 code learn post jumbotron

Yep, that’s right. Another freakin’ scroll to target deal. We Be Scrollin is a super slim (2 kbs) Jquery plugin designed to enhance single page site navigation with an animated scrolling effect. Enabled via data-attributes, the plugin provides a few options for speed, easing, offset, active class, and a completion callback.

Love em or hate em, one page scrollers can serve a purpose. Be it a marketing, promotional, or documentation site, spiffing things up with an animated scroll can enhance the overall UX. And while there’s already a few robust scrolling plugins in the wild, We Be Scrollin places an emphasis on being a stupid simple and lightweight solution.

Let’s Set Stuff Up

Set up is super simple. Just add the data-attribute data-scroll="yourID" to the link, with a corresponding unique ID on the target section. Rinse, repeat as many times as necessary. Drop in an Easing lib if you that’s your thing.

--Link: Add 'data-scroll' to link with unique name
----------------------------- */
<a data-scroll="sect-one" href="#">Top</a>

--Target: Apply that unique name as an id
-----------------------------  */
<section id="sect-one"></section>

Initialize it

With our nav and section ids in place, lets go ahead and initialize the badboy off the html doc.

 offset: '40',
 addActive: 'true',
 scrollSpeed: 500,
 scrollEase: 'swing',

Some Options

A few essential options are available to customize things.

Provides an offset from top in pixels. Required if you’re rockin a fixed nav and need to account for it’s height.

Controls the speed of the scroll animation

Enables scroll acceleration/deceleration easings. If you want to support additional easings, just include a lib, like this one

Adds an active class to the clicked nav item. Currently, the active class relies on a click event, so use a lib like Waypoints or Inview if true viewport detection is required. When I get some more time, I’ll circle back and write this in natively.

complete : function() {}
A callback function to trigger another function on completion of the animation. This is useful for say, closing a mobile nav or triggering another animation once you arrive.

Mobile Nav?

If you’re one page site includes a mobile nav drawer, you’re gonna want to close it after the animation stops. For example, if you have a simple mobile-nav that adds the class .js-open to push the drawer open, use the callback to remove that class and close things up (also highlighted in the demo provided below):

 offset: '40',
 addActive: 'true',
 scrollSpeed: 500,
 scrollEase: 'easeOutBounce',
 complete : function() {
     $( '.mobile-nav' ).removeClass('js-open');

Other posts