🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Just another jQuery scroll to top plugin which generates a highly customizable, CSS3 animated back to top button on the long webpage for better readability.

Back-to-top scroll-to-top

Documentation

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


You May Also Like