Documentation

dyScrollUpJS

Share


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

Download

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

Prerequisite

dyScrollUpJS needs jQuery v1.8 or above. Download jQuery from their website.

Getting started

Download the latest release version of dyScrollUpJS from its GitHub repository. Unzip the folder and you will get the following.



From the css folder get the minified stylesheet dyscrollup.min.css file. And from the js folder get the minified javascript dyscrollup.min.js file. Inside the image folder we get some sample images.

The HTML

Put the stylesheet in the head tag.

<link rel="stylesheet" href="/path/to/dyscrollup.min.css" />

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

<!-- first jQuery -->
<script type="text/javascript" src="/path/to/jquery.min.js">

<!-- next dyScrollUpJS -->
<script type="text/javascript" src="/path/to/dyscrollup.min.js">

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

Configuration

init({...})

The init() method of dyScrollUpJS takes an object as parameter. 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 32 Width of the image.
height
(optional)
Integer 32 Height of the image.

Example to get started

<!DOCTYPE html>
<html>
	<head>
		<title>Index Page</title>
		<link type="text/css" rel="stylesheet" href="css/default.css">

		<!-- dyscrollup style -->
		<link type="text/css" rel="stylesheet" href="css/dyscrollup.min.css">

	</head>
	<body>

		<!-- put your content here -->

		<!-- javascript -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/dyscrollup.min.js"></script>

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