https://github.com/markgoodyear/scrollup
https://github.com/markgoodyear/scrollup
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/markgoodyear/scrollup
- Owner: markgoodyear
- Created: 2013-01-22T21:30:48.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2022-02-06T14:53:46.000Z (almost 4 years ago)
- Last Synced: 2025-04-25T15:11:35.325Z (8 months ago)
- Language: JavaScript
- Homepage: http://markgoodyear.com/labs/scrollup/
- Size: 2.16 MB
- Stars: 998
- Watchers: 57
- Forks: 294
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-frontend - scrollUp
- awesome-frontend - scrollUp
- awesome-front-end - scrollUp
README
# ScrollUp [](https://travis-ci.org/markgoodyear/scrollup) [](https://david-dm.org/markgoodyear/scrollup#info=devDependencies)
> A jQuery plugin to create a customisable 'Scroll to top' feature that will work with any website
## Installing with Bower
To install scrollUp with Bower:
```bash
bower install scrollup
```
## How to use
Simply include the `jquery.scrollUp.min.js` file and place the following in the head of your document (make sure **jQuery** is included):
### Minimum setup
```js
$(function () {
$.scrollUp();
});
```
**Example with default options**
```js
$(function () {
$.scrollUp({
scrollName: 'scrollUp', // Element ID
scrollDistance: 300, // Distance from top/bottom before showing element (px)
scrollFrom: 'top', // 'top' or 'bottom'
scrollSpeed: 300, // Speed back to top (ms)
easingType: 'linear', // Scroll to top easing (see http://easings.net/)
animation: 'fade', // Fade, slide, none
animationSpeed: 200, // Animation speed (ms)
scrollTrigger: false, // Set a custom triggering element. Can be an HTML string or jQuery object
scrollTarget: false, // Set a custom target element for scrolling to. Can be element or number
scrollText: 'Scroll to top', // Text for element, can contain HTML
scrollTitle: false, // Set a custom title if required.
scrollImg: false, // Set true to use image
activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
zIndex: 2147483647 // Z-Index for the overlay
});
});
```
### activeOverlay
To create a visible line to help determine an ideal scroll distance from the top,
assign a valid CSS colour to the `activeOverlay` setting. This could be HEX, HSLA or RGB(A).
Example: `activeOverlay: '#00FFFF'`. See the demo for an example.
### scrollFrom
New feature in v2.0.0. Display the `scrollUp` element either the set distance from the top (default),
or from the bottom of the page.
### Destroy method
New feature in v2.0.0. If you need to destroy the instance of scrollUp,
simple use the following to remove all modifications to the DOM:
```js
$.scrollUp.destroy();
```
## Fully Customizable
ScrollUp is fully customisable via CSS which makes it simple to fit right into your project.
Simply target the scrollUp's generated ID in your CSS file and set your styles.
Below is a basic style example:
```css
#scrollUp {
bottom: 20px;
right: 20px;
padding: 10px 20px;
background-color: #555;
color: #fff;
}
```
### Use background image
To use a background image instead of text, simply set `scrollImg: true`.
This will allow you to set a background image in your CSS file.
## Contributing
Please see [CONTRIBUTE.md](CONTRIBUTE.md) for info on contributing.
## Demo
Check out the demo for more style and feature examples.