Scroll Up help user to move back to top on page in just one click. it enhance user experience that’s why in this pot I am going to share Lightweight JavaScript library for scroll up.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.
Installation
Install scroll to top library via NPM
npm install ue-scroll-js --save |
Libraries
Include the following JS and CSS library on page.
<link rel="stylesheet" href="//unpkg.com/ue-scroll-js@latest/dist/ue-scroll.min.css"> <script src="https://unpkg.com/ue-scroll-js">script> |
Example
Here is basic example for scroll up action.
>
>
-- Read CSS and JS -->
<link rel="stylesheet" href="/path/to/ue-scroll-js/dist/ue-scroll.min.css">
>
>
>
|
Set initial options
<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> |
Options:
Here are the list of options you can use to customze the back to top actions.
| 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. |
See live demo and download source code.
This awesome script developed by azrsix, Visit their official github repository for more information and follow for future updates.
