Neglected Parking Meter

    @fylgja/hashlink

    1.0.1 • Public • Published

    Fylgja - Hashlink

    NPM version license

    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";

    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;

    Install

    npm i @fylgja/hashlink

    Homepage

    fylgja.dev/

    DownloadsWeekly Downloads

    21

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    3.48 kB

    Total Files

    6

    Last publish

    Collaborators

    • grimlink