Minimal Back To Top Button – scrollToTop.js

Preview:

Description:

scrollToTop.js is a tiny JavaScript library that enables a fixed button to navigate your page back to the top at a given speed.

The library provides three different button styles to match the design of your website, and the back-to-top button only appears at a specific point on the page, such as after a user scrolls a certain distance.

How to use it:

1. Load the stylesheet scrollToTop.css and JavaScript scrollToTop.js in the HTML document.

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

2. Create the HTML for the back-to-top button.

<!-- Default -->
<div class="stt stt__block_black"></div>
<!-- Circle -->
<div class="stt stt__circle__black"></div>
<!-- Emoji -->
<div class="stt stt__emoji"></div>

3. Override the default animation speed in the scrollToTop.js.

var speed = 5;