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',

    // text color
    color: '#FFFFFF',

    // container element
    container: this._body, 

    // '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',

    // margins 
    marginX: 20,
    marginY: 20,  

    // bottom/top left/right
    position: 'bottom right',           

    // trigger position
    pxToTrigger: 600,
    
    // 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);

Changelog:

2023-09-26

• Update let to const

v0.2.5 (2019-06-30)

• Improved position, now options like "bottom right" or "top left" are avaiable.
• new parameters marginX and marginY.

---

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