Transition states
As part of the tutorial code, we have included some code that
makes use of intercepting the link to an anchor on the page.
The code then smoothly animates the transition of the page down
to this – because it is handled by the animation it provides a way
to create a more seamless experience for the user. The buttons are
doing the work, hence a cognitive offload for the user, with a pay
off that the animation between states occurs. To add to this, the
browser’s history is also updated so that if the user clicks the back
button it continues to work as expected.
There are many other solutions to this problem and many
scrolling libraries that can also be used just to make it even easier.
MoveTo.js (https://github.com/hsnaydd/moveTo) is a fantastic
library to use as it’s easy to implement with the inclusion of the
library code that’s available through a CDN. What makes this a
great consideration is that there are a number of configurable
options that help get more unique results such as easing, duration,
container and a callback after the animation has finished.
Probably the easiest library is smooth-scroll.js (https://github.
com/cferdinandi/smooth-scroll) because it requires the least work.
It’s a one-line implementation and it will just pick the native ‘#’ link
of an anchor.
Whichever solution it is that you pick, you will get the same
result – smooth scrolling. It’s just a matter of how much control
you wish to retain.
IN-DEPTH
The library moveTo.js gives a great number of configurable options that enable your
content to move up and down smoothly
SMOOTH SCROLLING
SOLUTIONS