Git Product home page Git Product logo

jquery-backtotop's Introduction

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

jquery-backtotop's People

Contributors

ppizarror avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

jquery-backtotop's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.