ue-scroll.js

Getting started

Install by npm (recommended)

$ npm install ue-scroll-js --save

or Yarn

$ yarn add ue-scroll-js

Using CDN

<link rel="stylesheet" href="//unpkg.com/ue-scroll-js@latest/dist/ue-scroll.min.css">
<script src="https://unpkg.com/ue-scroll-js"></script>

Basic Usage

<html>
  <head>
    <!-- Read CSS and JS -->
    <link rel="stylesheet" href="/path/to/ue-scroll-js/dist/ue-scroll.min.css">
    <script src="/path/to/ue-scroll-js/dist/ue-scroll.min.js"></script>
  </head>
  <body>
    <main>
      Your main contents
    </main>
    <!-- Run this script -->
    <div id="ue-scroll" class="ue-scroll btn-white arrow-black circle shadow"></div>
    <script>
      UeScroll.init();
    </script>
  </body>
</html>

or Set initial options

<!-- Run this script -->
<div id="my-custom-id" class="ue-scroll btn-white arrow-black circle shadow"></div>
<script>
  UeScroll.init({
    element: '#my-custom-id',
    scrollSpeed: 10
  });
</script>

Use on ES6 modules

'use strict';
import ue from 'ue-scroll-js';
// Run this script
ue.init();

By the default, ue-scroll.js automatically detect element having '#ue-scroll'. It needs to be started after DOM is rendered.

Options

Key	Data Type	Default Value	Description
element	String	'#ue-scroll'	Specify an element with a CSS selector.
position	Number	200	Specify the scroll position where the button is displayed.
scrollSpeed	Number	10	Specify the speed of scrolling (Recommend 20 or less)
fadeSpeed	Number	10	Specify the speed of fade (Recommend 20 or less)
cancelByScroll	Boolean	true	Cancel scrolling when scroll down (This setting is ignored on touch devices)
cancelByClick	Boolean	true	Cancel scrolling when window clicking.
cancelByKeydown	Boolean	true	Cancel scrolling when pressed any key.

In addition, You can freely change the color, design, position etc of buttons with CSS!

Examples

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>

Customize

<div class="ue-scroll arrow-white circle" style="background-color: #f69;"></div>

Go!

<div class="ue-scroll" style="width: auto; height: auto; padding: 10px; background-color: #fff; border: 1px solid #ccc; border-radius: 50%;">Go!</div>