EasyNav Button (⬆️/⬇️) for Astro 🚀

🧭 Add an easy-to-use navigational button (jump to top/bottom) to your Astro site. 🔼

🕵🏼 Usage

Install it by executing:

npm i "@igor.dvlpr/astro-easynav-button"

Then import it into your Astro project:

Layout.astro

import EasyNavButton from '@igor.dvlpr/astro-easynav-button'

<footer>
{ /* other markup */ }
    <EasyNavButton
        background="#09F"
        backgroundHover="#006"
    />
{ /* other markup */ }
</footer>

🤹🏼 API

This component supports a variety of optional customization and functionality options, listed below:

polyfillScroll: boolean

Since the component uses the scrollend event for properly adjusting its appearance according to the user scroll action and the given event currently has limited availability (source: caniuse) a polyfill is enabled by default, set this property to false in order to disable the inclusion of the JavaScript polyfill file.

The default value is true.

[!TIP] The used polyfill was created and is maintained by me as well, it being located:

scrollend-polyfill

[!NOTE] The polyfill file is minified, served via the jsDelivr CDN and has no side-effects in browsers that already support the scrollend event natively.

background: string

Background color of the button, any valid CSS color (HEX, RGB, RGBA, etc.).

The default value is '#afc7e5'.

backgroundHover: string

Background color of the button when hovered, any valid CSS color (HEX, RGB, RGBA, etc.).

The default value is '#3869c2'.

color: string

Foreground color of the button, any valid CSS color (HEX, RGB, RGBA, etc.).

The default value is '#333333'.

colorHover: string

Foreground color of the button when hovered, any valid CSS color (HEX, RGB, RGBA, etc.).

The default value is '#ffffff'.

size: number

Size of the button defined as the number of px.

The default value is 48.

borderRadius: number

Border radius of the button defined as the number of px.

The default value is 6.

[!TIP] Set to 0 to disable round corners.

offset: number

Offset of the button from the edge of the window defined as the number of px.

The default value is 10.

fontSize: number

The font size of the button defined as the number of px.

The default value is 30.

animationTime: string

The duration of the animation when swapping the up/down arrows applied on the button. Can be any valid CSS time value, in msec, sec, etc.

The default value is '250ms'.

iconTop: string

A glyph to use as the up arrow icon.

The default value is '\25B2' (U+25B2, ▲).

iconBottom: string

A glyph to use as the bottom arrow icon.

The default value is '\25BC' (U+25BC, ▼).

zIndex: number

The z-index value for the button. Adjust it only if you have used z-index in your CSS.

The default value is 999.

position: 'left' | 'right'

The horizontal position, either left or right edge of the window.

The default value is 'right'.

📝 Changelog

✨ Changelog is available here: CHANGELOG.md.

🪪 License

Licensed under the MIT license which is available here, MIT license.

🧬 Related

@igor.dvlpr/astro-post-excerpt

⭐ An Astro component that renders post excerpts for your Astro blog - directly from your Markdown and MDX files. Astro v2+ collections are supported as well! 💎

@igor.dvlpr/is-rootdir

🔼 Provides a way to check if the given path is the root drive/directory. ⛔

@igor.dvlpr/duoscribi

✒ DúöScríbî allows you to convert letters with diacritics to regular letters. 🤓

@igor.dvlpr/normalized-string

💊 NormalizedString provides you with a String type with consistent line-endings, guaranteed. 📮

@igor.dvlpr/recursive-readdir

📖 Provides recursive readdir() and readdirSync() functions. 📁

Provided by Igor Dimitrijević (@igorskyflyer).