Customizable Back To Top Button Plugin For jQuery - backToTop

Customizable Back To Top Button Plugin For jQuery - backToTop

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.

Main features:

  • 3 animations: spin, zoom and fade.
  • Custom position of the back to top button.
  • Custom button icon. Requires Font Awesome.
  • Custom trigger position.
  • Auto reveal and hide on scroll down/up.
  • Useful API.

How to use it:

1. To use this plugin, include the following JavaScript and CSS files on the webpage.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link href="dist/jquery-backToTop.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="jquery-backToTop.js"></script>

2. Initialize the button to create a default back to top on the webpage.

var $button = $.backToTop();

3. Customize the back to top with the following options.

var $button = $.backToTop({
    // background color
    backgroundColor: '#5D5D5D',
    // bottom position
    bottom: 20,
    // text color
    color: '#FFFFFF',
    // container element
    container: this._body,
    // left or right
    divFloat: 'right', 
    // 'nonn', 'spin', 'fade', 'zoom', or 'spin-inverse'
    effect: 'spin',
    // enable the back to top button
    enabled: true, 
    // width/height of the back to top button
    height: 70,  
    width: 70,
    // icon
    icon: 'fas fa-chevron-up',
    // left position
    left: 20,
    // trigger position
    pxToTrigger: 600,
    // right position
    right: 20,
    // scroll animation
    scrollAnimation: 0, 
    // or 'fawesome'
    theme: 'default',
    // z-index
    zIndex: 999
    
});

4. Available API methods.

// Enable the back to top button
$button.enable();
// Resize the back to top button
$button.resize(width, height);
// Show the ack to top button
$button.show();
// Hide the back to top button
$button.hide();
// Toggle the back to top button
$button.toggle();
// Change the theme
$button.changeTheme(theme);
// Change the effect
$button.changeEffect(effect);

This awesome jQuery plugin is developed by ppizarror. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 10.07.2018
  • Source