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

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

💖 Support further development

I work hard for every project, including this one and your support means a lot to me!
Consider buying me a coffee. ☕
Thank you for supporting my efforts! 🙏😊



@igorskyflyer

📃 Table of contents

• Usage
  • CSP notice
• API
  • polyfillScroll
  • background
  • backgroundHover
  • color
  • colorHover
  • size
  • borderRadius
  • offset
  • fontSize
  • animationTime
  • iconTop
  • iconBottom
  • zIndex
  • position
  • show
• Examples
• Changelog
• License
• Related
• Author

🕵🏼 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>

CSP notice

Warning

This Astro component includes its own JavaScript, if you use CSP in your project you need to add its respective integrity hash to the allowed sources list.

Inline script SHA-256 hash: sha256-KWtqqqQFySoITWIucvZhAoWjT2J9jdUA7LfvxyqjJvQ=

🤹🏼 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.

Warning

If you use CSP in your project you need to add the polyfill's integrity hash to the allowed sources list.

---

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'.

---

show: 'always' | 'whenNeeded'

Defines when to show the button.

'always' will ignore if scrolling is possible (scrollbar visible),

'whenNeeded' will check if scrolling is possible (scrollbar visible) and change the button's visibility based on it.

The default value is 'whenNeeded'.

---

✨ Examples

index.astro

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

<Layout title="Welcome to Astro.">
  <main>
    <EasyNavButton
      background="#09F"
      backgroundHover="#006"
      show="always"
    />
  </main>
</Layout>

---

📝 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/recursive-readdir

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

@igor.dvlpr/valid-path

🧰 Provides ways of testing whether a given value can be a valid file/directory name. 🏜

@igor.dvlpr/windev

🍃 Provides ways of checking whether a path is a legacy Windows device. 💾

@igor.dvlpr/extendable-string

🦀 ExtendableString allows you to create strings on steroids that have custom transformations applied to them, unlike common, plain strings.. 🪀

---

👨🏻‍💻 Author

Created by Igor Dimitrijević (@igorskyflyer).