Hashlink

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.

Making it perfect for hashlinks. But also works with Javascript scrollto actions.

Installation

npm install @fylgja/hashlink

Then include the component in to your code via;

@use "@fylgja/hashlink";
// Or via PostCSS import
@import "@fylgja/hashlink";

@layer support

If you need support for @layer, use the following import;

@use "@fylgja/hashlink" with ($hashlink-layer: "utilities");
// Or via PostCSS and other options as native CSS
@import "@fylgja/hashlink" layer(utilities);

How to use

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.

Config

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;