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');
},
});