dyScrollUpJS

Project

Share
dyScrollUpJS logo

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

license npm version

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.

Contents

License

It's free and released under MIT License.

Watch the YouTube tutorial video.


Getting started

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

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:
dyscrollupjs 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>
Share