dyScrollUpJS
Project

dyScrollUpJS is a small JavaScript plugin that you can use in your website and blog to create "Scroll-to-top" button.
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
- About
- License
- Tutorial video
- Getting started
- The
dist
directory - Starter template
- HTML
- Configuration
- Example with configuration
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.
- 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>