The Hashlink is a small utility component, which adds smooth scrolling to the page via CSS
and a scroll offset to any element with a id.
npm install @fylgja/hashlink
Then include the component in to your code via;
// Or via PostCSS import
The styles require no additional html markup,
but will only take affect if a hashlink points to the correct id and can receive focus.
<a href="#heading">Go to Heading</a>
<h2 id="heading" tabindex="-1">..</h2>
Now the page will smooth scroll to the target id and with a specific offset.
Which is also be super handy with sticky headers.
As with almost all of our components, CSS variables can be configured to add your own look/style.
Want direct control on the base styles, here are the following SCSS variables can you modify.
$enable-hashlink-scroll-behavior: true !default;
$enable-hashlink-scroll-behavior-focus-only: true !default;
$enable-hashlink-id-offset: true !default;
$hashlink-scroll-offset: 1rem !default;