The scrollToTop script creates a link that leads to the top of the page once you've scrolled down far enough. Size of the plugin talks to 2 KB in the compressed version is narrow and does not require an extra CSS file or images. Who wish to customize scrollToTop can but then fall back on your own CSS code or a separate image. The scrollToTop script offers a number of options to suit your own needs.

Demo

For Demo scroll down this page and look at the right bottom corner.

Download

Usage

The scrollToTop plugin requires jQuery and must be included after library.
Extra HTML markup is not necessary since, scrollToTop generates all the necessary elements themselves.

<!DOCTYPE html>
<html>
<head>
	[...]
	<script src="js/jquery-1.10.1.min.js"></script>
	<script src="js/jquery.scrolltotop.min.js"></script>
	[...]
</head>
<body>
	[...]
</body>
</html>

Call the Plugin, the usual way in document ready function.

$(document).ready(function(){
  	$(document).scrollToTop();
});

Options

Key Default value Description
triggerID '#top' The scrollToTop plugin creates an anchor element, which is accessed via a CSS ID. This ID can be changed at will, if the default ID # top was already taken. The CSS ID must be specified as a string and must be marked with # as the ID. (String)
startline 30 The startline option determines how far a visitor have to scroll down so that the top link is displayed. (Number).
targetline 0 Default the page scrolls back to the top when the top link is clicked. The aim of the scroll function can be moved as needed down. (Number)
fxSpeed 800 The fxSpeed defines the speed of scrolling to top. This is specified as a Number and jump to either time in milliseconds. (Number).
useEasing false The scrolling behavior can be influenced with jQuery Easing. For this course, the Easing Plugin has to be integrated. (Boolean)
fxEasing 'easeOutBounce' If jQuery Easing is involved, one can determine with fxEasing the easing type. (String)
fadeTime 200 This option allows the input and blanking of the buttons to set. (Number)
content '&#9650' Defines the content of the button in the font Arial. (String)
contentColor '#c8ccd1' Defines the color of the content. (String)
bgColor '#454c54' Defines the color of the background. (String)
borderRadius '100%' Defines the border radius of the button. (String)
customCss false Want to change the look of the top button with own CSS, you can disable with this option to the default CSS values. (Boolean)
customPosX '20px' This option specifies the alignment of the top links on the horizontal axis (X-axis), starting from the right edge of the browser. (String)
customPosY '20px' This option specifies the alignment of the top links on the verticl axis (Y-axis), starting from the bottom edge of the browser. (String)
useImage false This option generates an image tag inside of the top link. (Boolean)
imagePath 'images/top.png' The path to the image must be specified starting from the root. (String)
imageWidth 40 Defines the image width. (Number)

Changelog

  • Version 1.2
    • new: option for border-radius
  • Version 1.1
    • new: no target anch needed
    • new: doesn't create target anch
    • new: option for color of content
    • new: option for color of background
    • change: change startline to 30
  • Version 1 - final plugin

Licence

The plugin jacc is under MIT licence and GNU licence.
Copyright © 2013 Konrad Rolof