goTop is a <2kb Scroll to Top jQuery plugin.
A live demo is available with documentation.
- Download the latest full source code (includes debug and minified versions). zip | tarbar
- Clone the entire project or fork your own version.
- Install using NuGet
PM> Install-Package jquery-gotop
- Install using NPM
npm install jquery-gotop
- Install using bower
bower install jquery-gotop
- Download the minified version of the plugin and include it after jQuery.
- Add the following HTML to the bottom of the
bodytag:
<div id='goTop'></div>- Add the following JavaScript code:
<script>
$(function () {
$('#goTop').goTop();
});
</script>| Name | Description | Type | Default |
|---|---|---|---|
| container | The HTML element to which the scroll function will be attached. If no value is given, then the scroll function will be attached to the window. | String | "" |
| appear | The amount of pixels the page must be scrolled down before the arrow is displayed. | Integer | 200 |
| scrolltime | A number determining how long the animation will run when scrolling to the top of the page. | Integer | 800 |
| src | The CSS classes used to display the arrow. | String | fas fa-chevron-up |
| width | The width of the arrow. | Integer | 45 |
| place | The location where the arrow will be shown. Valid values are "right" or "left". | String | "right" |
| color | The color of the CSS classes icon. | String | "" |
| fadein | A number determining how long the animation will run when fading in to opaque. | Integer | 500 |
| fadeout | A number determining how long the animation will run when fading out to transparent. | Integer | 500 |
| opacity | Sets the transparency level for the arrow, where 1 is not transparent at all, 0.5 is 50% see-through and 0 is completely transparent. | Decimal | 0.5 |
| marginX | The percentage amount indicating how far away the arrow is from the bottom, left, or right, depending on the value of place. | Integer | 2 |
| marginY | The percentage amount indicating how far away the arrow is from the top or bottom, depending on the value of place. | Integer | 2 |
| zIndex | The z-index value. | Integer | 9 |
A more complete example which changes the placement from right to left is:
<script>
$(function () {
$('#goTop').goTop({
"place": "left"
});
});
</script>Have a bug or a feature request? Please open a new issue. Before opening any issue, please search for existing issues and read the Issue Guidelines, written by Nicolas Gallagher.
For transparency and insight into our release cycle, and for striving to maintain backward compatibility, jquery-gotop will be maintained under the Semantic Versioning guidelines as much as possible.
Releases will be numbered with the following format:
<major>.<minor>.<patch>
And constructed with the following guidelines:
- Breaking backward compatibility bumps the major (and resets the minor and patch)
- New additions without breaking backward compatibility bumps the minor (and resets the patch)
- Bug fixes and misc changes bumps the patch
For more information on SemVer, please visit http://semver.org/.
Scott Dorman
- Switched from using the Bootstrap 3.x Glyphicons library to Font Awesome Free (version 5 and up) because Bootstrap 4.x no longer supports Glyphicons. (#4)
- Adds the ability to specify a selector to use. (#2)
- Adds the ability to change the z-index. (#3)
- Fixed link to demo in the readme.
- Simplified placement options.
- Minor code simplifications.
- Making the version numbers consistent across nuget, npm, and bower.
- Added IDs to the
aandspantags to allow CSS styling. - Added a dependency for Bootstrap 3.0.0 or greater.
- Updated the jQuery dependency to 1.6.
- Added bower and npm packages
- Initial commit
Copyright 2015 Scott Dorman under the MIT license.