webroukBackTopScrollIndicator

Webrouk Back Top Scroll Indicator is a lightweight native JavaScript web component for smooth back to top button with a circular progress bar which indicates the current reading progress when scrolling down/up the webpage.

• No dependencies
• Lightweight
• Hides on top
• Smooth Scroll

Demo

CodePen Example

Installation

Use NPM to download and install it directly in to your project

$ npm install webrouk-back-top-scroll-indicator --save

or include js file manually

<!-- webrouk-back-top-scroll-indicator component file -->
<script src="webrouk-back-top-scroll-indicator.js"></script>

Usage

Using webroukBackTopScrollIndicator is simple.

<webrouk-back-top-scroll-indicator
  title="Back to Top"
  show-at="50">
</webrouk-back-top-scroll-indicator>

Options

| Option | Type | Description | Default | | ----------- | :----: | ----------- | :----: | | show-at | string | Show the button at y position | 50 |

Style Customization

Expected CSS Variables from inside the component (optional).

webrouk-back-top-scroll-indicator {
  --w-primary-color: 218, 95%, 54%; /* HSL color values without the brackets */
  --w-diameter-size: 46px;
}

Styleable Component Parts

• button
• svg
• path

Example:

webrouk-custom-select::part(button) { /* some styles ... */ }

webrouk-custom-select::part(svg) { /* some styles ... */ }

webrouk-custom-select::part(path) { /* some styles ... */ }

License

webroukBackTopScrollIndicator is licensed MIT. It can be used for free and without any attribution, in any personal or commercial project.