Tiny Customizable Scroll To Top Button – ue-scroll-js

ue-scroll-js is a tiny JavaScript plugin to display a customizable ‘Scroll To Top’ button at the bottom of the webpage when scrolling down.

How to use it:

Install the ue-scroll-js via package managers.

# Yarn
$ yarn add ue-scroll-js
# NPM
$ npm install ue-scroll-js --save

Import the ue-scroll-js into your module.

import ue from 'ue-scroll-js';

Or directly include the ue-scroll-js’ files on the page.

<link href="ue-scroll.min.css" rel="stylesheet">
<script src="ue-scroll.min.js"></script>

Create the html for the scroll to top button.

<div class="ue-scroll btn-white arrow-black circle"></div>

Available button themes:

<!-- Circle -->
<div class="ue-scroll btn-white arrow-black circle"></div>
<div class="ue-scroll btn-gray arrow-white circle"></div>
<div class="ue-scroll btn-black arrow-white circle"></div>
<div class="ue-scroll btn-white arrow-black circle shadow"></div>
<!-- Rounded Rectangle -->
<div class="ue-scroll btn-white arrow-black rounded-rectangle"></div>
<div class="ue-scroll btn-gray arrow-white rounded-rectangle"></div>
<div class="ue-scroll btn-black arrow-white rounded-rectangle"></div>
<div class="ue-scroll btn-white arrow-black rounded-rectangle shadow"></div>
<!-- Square -->
<div class="ue-scroll btn-white arrow-black square"></div>
<div class="ue-scroll btn-gray arrow-white square"></div>
<div class="ue-scroll btn-black arrow-white square"></div>
<div class="ue-scroll btn-white arrow-black square shadow"></div>

Or apply your own CSS styles as these:

<div class="ue-scroll" style="...">Back!</div>

Initialize the ue-scroll-js plugin.

UeScroll.init();

Options and defaults.

UeScroll.init({
  // CSS selector
  element: '#ue-scroll',
  // the scroll position where the button should be displayed
  position: 200,
  // scrolling speed
  scrollSpeed: 10,
  // fading speed
  fadeSpeed: 10,
  // Cancel scrolling when scroll down (This setting is ignored on touch devices)
  cancelByScroll: true,
  // Cancel scrolling when window clicking.
  cancelByClick Boolean true,
  // Cancel scrolling when pressed any key.
  cancelByKeydown Boolean true  
  
});

Changelog:

02/17/2020

• v2.0.2

08/23/2018

• v2.0.1