jquery-backToTop
Fully customizable jQuery back to top button.
Setup
Include both jquery-backToTop.min.js
and jquery-backToTop.min.css
in your document after including jQuery.
<script src="jquery-backToTop.min.js"></script> <link href="jquery-backToTop.min.css" type="text/css" rel="stylesheet" media="screen">
Note: Some themes use font-awesome theme [https://fontawesome.com/get-started].
Usage
var $button = $.backToTop({options});
Options
Option | Type | Default | Description |
---|---|---|---|
backgroundColor | string | "#5D5D5D" | Background color of the backToTop |
color | string | "#FFFFFF" | Text color |
container | jQuery | $("body") | Container selector |
effect | string | "spin" | Show/Hide effect |
enabled | boolean | true | BackToTop enabled |
height | number | 70 | Height of the button (px) |
icon | string | "fas fa-chevron-up" | Font-awesome icon |
marginX | number | 20 | Left/right margin (px) |
marginY | number | 20 | Bottom/top margin (px) |
position | string | "right" | Float position, left/right top/bottom, ex: "bottom right" |
pxToTrigger | number | 600 | Scroll px to trigger |
right | number | 20 | Right margin (px) when divFloat=right |
scrollAnimation | number | 0 | Scroll animation |
theme | string | "default" | Theme of the button |
width | number | 70 | Width of the button |
zIndex | number | 999 | z-Index of the button |
Avaiable themes
- default
- fawesome
Avaiable effects
- none
- fade
- spin
- spin-inverse
- zoom
API
- Enable the button
$button.enable(status=boolean, disableEffect=boolean);
- Resize the button
$button.resize(width, height);
- Show button
$button.show(disableEffect=boolean);
- Hide button
$button.hide(disableEffect=boolean);
- Toggle button
$button.toggle(disableEffect=boolean);
- Change theme
$button.changeTheme(theme);
- Change effect
$button.changeEffect(effect);
TO-DO
- Create a nice website for the repo
- More themes
- More effects
License
This project is licensed under MIT [https://opensource.org/licenses/MIT]
Author
Pablo Pizarro R. | 2018-2019