Documentation

Small plugin that you can use in your website and blog to create "Scroll-to-top" button using dyScrollUpJS.

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

Download

Click here to get the latest release for the GitHub repository.

Prerequisite

Version 2.x requires no jQuery.

Getting started

You can choose one of the following ways to get dyScrollUpJS.

Download the latest release version of dyScrollUpJS from its GitHub repository.

Or, you can use NPM npm install --save dyscrollupjs to install it as a dependency for your project.

Or, you can get it from 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.

The HTML

Include dyScrollUpJS JavaScript file in the body tag generally at the end and then you can write some JavaScript code to initialize the plugin.

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

<!-- finally dyScrollUpJS initialize code -->
dyscrollup.init();

Configuration

init({...})

The init() method of dyScrollUpJS takes an object an argument. Following are the properties and their respective values that you can set.

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.
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. If you want to use the actual image width set width to `"auto"` or specify a custom integer value.
height (optional)	Integer String	32	Height of the image. If you want to use the actual image height set height to `"auto"` or specify a custom integer value.

Example to get started

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

    <!-- put your content here -->

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

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

In the above code we are including the dyScrollUpJS JavaScript file and then initialising it with the default configuration.

Example with configuration

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

    <!-- put your content here -->

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

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

In the above example we are including the dyScrollUpJS JavaScript file and passing our own configurations.