We Be Scrollin

admin 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.

$('html').weBeScrollin({
 offset: '40',
 addActive: 'true',
 scrollSpeed: 500,
 scrollEase: 'swing',
});

Some Options

A few essential options are available to customize things.

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

scrollSpeed
Controls the speed of the scroll animation

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

addActive
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):

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

Demo & Download

Here’s a little demo for ya

Download We Be Scrollin on Github 

Other posts

You’re My Eero

Read Full Article design life post jumbotron
Prev

Passing The Baton In Project Management

Read Full Article archive perspectives
Next