Scroll Up JavaScript Library

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.
scroll-up-javascript

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/[email protected]/dist/ue-scroll.min.css">
<script src="https://unpkg.com/ue-scroll-js"></script>

Example

Here is basic example for scroll up action.

<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>



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>

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.

DEMO | DOWNLOAD

This awesome script developed by azrsix, Visit their official github repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.