Scroll to
Use to allow a smooth scroll to a target element when clicking a link.
Description
Javascript only component. The clickable element should have [data-js-scrollto] as an attribute. The page will scroll to the ID specified as value for href. If the target element doesn't exist, the anchor will have an is-hidden class on it. If JS is disabled or doesn't work as expected, the browser will do a jump to the target instead of a smooth scroll.
If the [data-js-scrollto] is added on an element that is not an anchor, then the ID of the target has to be set as a value of the [data-js-scrollto] attribute. This has no JS fallback.
Import JS functionality
In order to have the JS functionality of this component available, you need to include it in your project. Assuming the project is using ES6:
import scroll-to from 'radius/dist/m2dm/js/scroll-to';
scrollTo(); Usage
Usage example
Code example
<a href="#target-scroll" data-js-scrollto>Click me, I'm a link!</a>
<button data-js-scrollto="#target-scroll">Or click me, I'm a button!</button>
<div id="target-scroll" class="scroll-to">Clicking the above button will cause a scroll to here if there's enough room, if not it will scroll as much as it can.</div>