Go to rebrand

Smooth Scroller

Component used to move the scroll window smoothly. It was made through the requestAnimationFrame looping on the repaint layer of rendering.

Inspired in https://github.com/callmecavs/jump.js

How to use

  • Make sure to include and load the file below into your page or project: <script defer src="{{ static("js/ca_styleguide_smooth_scroller.js") }}"></script>
  • Call the .jump method to dispatch your animation according to the target variations <script> window.addEventListener('load', () => { SmoothScroller.scrollWindowTo( yourTargetPosition, yourOptions = {} ); }); <script>

Targets

Where the scroll must go. It's possible to set three variations of target:

By Number

You can define a valid number (in pixels) to define as a target of scroll.

SmoothScroller.scrollWindowTo(100);

By String

You can define a valid CSS selector to define as a target of scroll.

SmoothScroller.scrollWindowTo(".how-to-use");

By Object

You can define a valid HTMLNode as a target of scroll.

const desiredNode = document.querySelector(".how-to-use"); SmoothScroller.scrollWindowTo(desiredNode);

Options

It's a optional value that you can set passing as param through .jump to customize your scroll.

defaultOptions = { duration: 1000, //in ms offset: 0, //in px focusElement: null, easing: EasingFunctions.EASE_IN_OUT_QUAD, callback: null }

Duration

You can define by options a valid duration number in miliseconds.

const options = { duration: 50; } SmoothScroller.scrollWindowTo(".how-to-use", options);

Offset

Quantity to be increased on the calc of target position. Can be positive or negative number.

const options = { offset: -100; } SmoothScroller.scrollWindowTo(".how-to-use", options);

Easing

Recipe where the duration will be resolved.

const easing = (t, b, c, d) => t; SmoothScroller.scrollWindowTo(".easing-functions", { easing });

Focus Element

Accessibility features, basically if there is a valid element set the tabindex and focus of element mentioned. Very useful to use in forms and keyboard events.

const el = document.querySelector(".js-target-number-btn"); const options = { focusElement: el, } SmoothScroller.scrollWindowTo(".how-to-use", options);

Callback

You can define a function to be called when .jump has been concluded.

const options = { callback: () => alert('The jump has been concluded. o/'), duration: 3000, } SmoothScroller.scrollWindowTo(".how-to-use", options);

Easing-Functions

It was created a class to group all math formulas. The common/easing_functions.es6 is already included in smooth-scroller.es6 All functions are static and you can use everywhere.