Documentation - Version 2.xDocumentation - Version 1.x

Documentation - Version 1

dyScrollUpJS

← Prev

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

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

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.

NameTypeDefaultDescription
showafter
(optional)		Integer300This 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)		Integer500This is in milliseconds. Use for smooth scrolling effect.
position
(optional)		String"right"Position of the scroll button.
Possible Values:
"left"
"right"
image
(optional)		String"image/36.png"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		"auto"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		"auto"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>
		<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>
← Prev