Author: | chiranjit2020 |
---|---|
Views Total: | 621 views |
Official Page: | Go to website |
Last Update: | January 20, 2021 |
License: | MIT |
Preview:

Description:
A tiny and configurable back to top button that auto reveals on scroll down and auto hides after the page has scrolled to the top.
How to use it:
1. Add the back2top.js JavaScript library to the page.
<script src="back2top.min.js"></script>
2. Create a back to top button on the page.
<button id="back2top">BACK2TOP</button>
3. Initialize the back to top button and decide how far the page is scrolled down to display this button.
const button = document.querySelector("#back2top"); BACK2TOP(button, 200);
4. Config the smooth scroll behavior.
// BACK2TOP(selector, offset, prop, time, effect, delay); BACK2TOP(button, 200, "all", 300, "ease", 0);
5. Apply your own CSS styles to the back to top button.
button#back2top{ position: fixed; right: 2%; bottom: 2%; opacity: 0; visibility: hidden; font-size: 14px; color: #fff; background-color: #4F46E5; border: none; outline: none; cursor: pointer; padding: 10px 18px; margin: 0; border-radius: 3px; }