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

Category: Animation , Javascript | March 16, 2018
Author: azrsix
Views Total: 139
Official Page: Go to website
Last Update: March 16, 2018
License: MIT

Preview:

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

Description:

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
  
});

Leave a Reply