THEMETRIAL

Smart Back To Top Button In JavaScript – back2top.js

Author:chiranjit2020
Views Total:0 views
Official Page:Go to website
Last Update:January 20, 2021
License:MIT

Preview:

Smart Back To Top Button In JavaScript – back2top.js

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="https://www.cssscript.com/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;
}


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.