Minimal Back To Top Button In Pure JavaScript – up-button

Preview:

Description:

A minimal yet customizable and smooth scroll to top button component implemented in vanilla JavaScript.

The back to top button displays when the page scrolls down more than 400px and automatically dismisses itself on scroll up.

How to use it:

1. Insert the up-button’s files into the document.

<link rel="stylesheet" href="up_btn.css" />
<script src="up_btn.js"></script>

2. Initialize the library to generate a basic back to top button.

up();

3. Customize the back to top button by passing the following parameters to the up() function.

up({
  // bottom position
  bottom: '20px',
  // right position
  right: '20px',
  // width
  width: '45px',
  // height
  height: '45px',
  // background color
  bg: 'green',
  // custom icon
  src: './chevron-up-solid.svg',
  // distance from the top to show the back to top button
  whenShow: 400,
  // circular button?
  circle: true
  
});

Changelog:

12/19/2020

• Update up_btn.css

10/27/2020

• Update up_btn.js