Press "Enter" to skip to content

A Smooth Scrolling Back To Top Button on Native JavaScript | up-button

UP Button is a simple but customizable and smooth scroll element implemented in Vanilla JavaScript. The initialize button, the call function (), in your js file, or in the HTML file, inside the script tag.

The button has standard styles defined in the css file, but it can be customized for a specific design by passing parameters to a function.

How to make use of it:

1. Insert the up button’s information into the doc.

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

2. Initialize the library to generate a primary again to the top button.

up();

3. Customize the again to top button bypassing the next 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
  
});

Minimal Back To Top Button In Pure JavaScript, jquery scroll to top, UP Button Plugin/Github

Smooth-Scrolling-Back-To-Top-Button-Demo


See Demo And Download

Official Website(TheSanches): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.