dyScrollUpJS

dyScrollUpJS is a small JavaScript plugin that you can use in your website and blog to create "Scroll-to-top" button.

Star Fork Watch Follow @yusufshakeel

Become a Patron

If you find this project useful then feel free to back it. I'm on Patreon

Become a Patron!

Feeling generous

Buy me a cup of tea Donate via PayPal

This documentation is for version 2.x of dyScrollUpJS project.

License

It's free and released under MIT License.

Download GitHub CDN

Watch the YouTube tutorial video.

Getting started

You can start using this plugin in your project in any of the following ways.

Download the latest release from dyScrollUpJS GitHub repository .
Install it using NPM by running the following command.
$ npm i dyscrollupjs
Or use dyScrollUpJS via jsDelivr CDN.

The `dist` directory

For production environment you can use the compressed version found inside the dist directory.

For development purpose you can check out the uncompressed code inside the src directory.

Starter template

Include dyScrollUpJS JavaScript file at the end of the document and then initialize the plugin.

<!DOCTYPE html>
<html>
  <head>
    <title>Index Page</title>
  </head>
  <body>

    <!-- put your content here -->

    <!-- javascript -->
    <script src="https://cdn.jsdelivr.net/npm/dyscrollupjs@2.0.0/dist/js/dyscrollup.min.js" integrity="sha256-LfkKeq4SviE+kH1+7VygXHYbOL05tpcwWHo8L5wLoQ0=" crossorigin="anonymous"></script>

    <!-- init dyscrollup -->
    <script>
    dyscrollup.init();
    </script>
  </body>
</html>

HTML

Include dyscrollup.min.js file in the page preferably at the end of the page before the closing body tag.

After including the file you must initialise the code by calling the init() method.

In the following example we are including the dyscrollup.min.js file and then initialising it.

<!-- dyScrollUpJS -->
<script src="path/to/dist/js/dyscrollup.min.js">

<!-- initialize dyScrollUpJS -->
<script>dyscrollup.init();</script>

Configuration

We can configure dyScrollUpJS by passing an object to the init method.

In the following table we have the configuration properties and their values.

Name	Type	Default	Description
showafter (optional)	Integer	300	This is in pixels. So, after you scroll the page down 300px the scrollup button will appear. The button disappear as soon as the page is back on top.
scrolldelay (optional)	Integer	500	This is in milliseconds. Use for smooth scrolling effect.
position (optional)	String	"right"	Position of the scroll button. Possible Values: `"left"` `"right"`
image (optional)	String	""	Path of the image file. Tips: Use .png image file with transparent background for awesome look. Here is a sample image: Path: `https://cdn.jsdelivr.net/npm/dyscrollupjs@2.0.0/dist/image/32.png` There are some more images available with this plugin. You can find them inside the `dist/image` directory.
shape (optional)	String	"circle"	Shape of the scrollup image. Possible Values: `"circle"` `"other"` Use `"other"` for custom image shape.
width (optional)	Integer String	32	Width of the image in pixels. If you want to use the actual image width then set the width to `"auto"` or specify a custom integer value.
height (optional)	Integer String	32	Height of the image in pixels. If you want to use the actual image height then set the height to `"auto"` or specify a custom integer value.

Example with configuration

In the following example we are using using dyScrollUpJS with some configuration.

<!DOCTYPE html>
<html>
  <head>
    <title>Index Page</title>
  </head>
  <body>

    <!-- put your content here -->

    <!-- javascript -->
    <script src="https://cdn.jsdelivr.net/npm/dyscrollupjs@2.0.0/dist/js/dyscrollup.min.js" integrity="sha256-LfkKeq4SviE+kH1+7VygXHYbOL05tpcwWHo8L5wLoQ0=" crossorigin="anonymous"></script>

    <!-- init dyscrollup -->
    <script>
    dyscrollup.init({
      showafter : 600,
      scrolldelay : 500,
      position : "left",
      image : "https://cdn.jsdelivr.net/npm/dyscrollupjs@2.0.0/dist/image/32.png",
      shape : "other",
      width : 30,
      height : 30
    });
    </script>
  </body>
</html>

Project