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
<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%;
--w-diameter-size: 46px;
}
Styleable Component Parts
Example:
webrouk-custom-select::part(button) { }
webrouk-custom-select::part(svg) { }
webrouk-custom-select::part(path) { }
License
webroukBackTopScrollIndicator is licensed MIT.
It can be used for free and without any attribution, in any personal or commercial project.