Back to Top Button Using Vanilla Javascript | back2top.js

Back2Top Js is a small library for creating a back-to-the-top using Vanilla JavaScript. The small, configurable backup button appears automatically when scrolling down and hides automatically after the page has scrolled to the top.

back to top button javascript smooth scrolling, back to top button pure css, scroll to top button jquery, button click jumps to top of page, animated back to top button html

How to make use of it:

1. Add the back2top.js JavaScript library to the web page.

<script src="back2top.min.js"></script>

2. Create an button on the web page.

<button id="back2top">BACK2TOP</button>

3. Initialize the again to prime button and resolve how far the web page is scrolled right down to show this button.

const button = document.querySelector("#back2top");
BACK2TOP(button, 200);

4. Config the graceful scroll conduct.

// BACK2TOP(selector, offset, prop, time, effect, delay);
BACK2TOP(button, 200, "all", 300, "ease", 0);

5. Apply your individual CSS types to the again 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;
}

Smart Back To Top Button, BACK2TOP JS Plugin/Github, vanilla js scroll to element


See Demo And Download

Official Website(chiranjit2020): Click Here

This superior jQuery/javascript plugin is developed by chiranjit2020. For extra Advanced Usage, please go to the official website.

Share