Fully Configurable jQuery Back To Top Plugin - scrollpress

scrollpress is a simple, flexible jQuery plugin for generating a back to top link for your long webpage that all the styles and configurations can be set in the JavaScript during init. The back to top button will appear at the bottom-right of the webpage when the uses scrolls down a certain number of distance from the top. And it will auto hide when the user reaches the top of the webpage.

How to use it:

1. Add jQuery library and the jQuery scrollpress plugin's JS & CSS files to your html page.

<link href="src/scrollPress.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="src/scrollPress.js"></script>

2. By default, the plugin uses Font Awesome iconic font for the 'scroll to top' icon.

<link rel="stylesheet" href="font-awesome.min.css">

3. Initialize the plugin and done.

$(window).scrollPress();

4. Customize the scroll to top button.

/**
 * scroll to top button
 * @type {Boolean}
*/
btn: {
    state: true,
    
    /**
     * @type {String}
    */
    outerHTML: "<div class='scroll-btn'><div class='sb-layer' style='z-index:998;'></div></div><!--/.scroll-btn-->",
    
    /**
     * put the full icon html here example(<i class='fa fa-angle-double-up'></i>)
     * @type {String}
    */
    icon: "<i class='fa fa-angle-up'></i>",
    
    /**
     * new container for scroll to top button
     * must be relative position
     * @type {JQuery selector}
    */
    container: null,

    /**
     * threshold to show button when scrollTop passes it
     * @type {Number}
    */
    threshold: $window.innerHeight() / 3,
    
    /**
     * @type {Boolean}
    */
    inlineStyle: true,
    
    style: {
        zIndex: '999',

        // 100% if continer enabled
        width: '40px',
        height: '40px',
        
        // absolute if container enabled
        position: 'fixed',
        
        // auto if container true
        right: '20px',
        bottom: '20px',
        left: 'auto',
        top: 'auto',
        
        backgroundColor: 'white',
        borderRadius: '14%',
        transition: 'all 1s ease',
        animationDelay: ''
    },
    
    /**
     * trigger when scroll top pass threshold
    */
    fadeAnimation: {
        slide: true,
        scale: true,
        bounce: false,
        rotate: false,
    },
    
    /**
     * class added when scrollTop greater than btn.threshold
     * @type {String}
    */
    fadeInClass: '',
    
    /**
     * animation added on mousedown event
     * @type {Object}
    */
    clickAnimation: {
        
        bounce: false,
        
        bubble: {
            state: true,
            outerHTML: '<div class="click-bubble-container"><div class="click-bubble"></div></div><!--/.click-bubble-->',
            
            inlineStyle: true,
            zIndex: '999',
            width: '100%',
            height: '100%',
            backgroundColor: '#96d0ff',
            borderRadius: null
        },
        
        spreadBorder: {
            state: true,
            outerHTML: '<div class="spread-border"></div>\<!--/.spread-border-->',
            
            inlineStyle: true,
            zIndex: '997',
            width: '100%',
            height: '100%',
            borderWidth: '4px',
            borderStyle: 'solid',
            borderColor: '#e1e1e1',
            borderRadius: null
        }
    },      
    
    /**
     * to tigger css animation on hover
     * @type {String}
    */
    clickClass: '',
},

/**
 * @type {Boolean}
*/
btn_state: null,

/**
 * btn arrow icon
*/
btn_icon: null,

/**
 * @type {Jquery selector}
*/
btn_container: null,

/**
 * @type {Number}
*/
btn_threshold: null,

/**
 * disable incase of styling with external stylesheet
*/
btn_inlineStyle: null,

/**
 * @type {Object}
*/
btn_style: {},

/**
 * @type {Object}
*/
btn_fadeAnimation: {},

/**
 * @type {String}
*/
btn_fadeInClass: null,

/**
 * @type {Boolean}
*/
btn_clickAnimation_bounce: null,

/**
 * @type {Object}
*/
btn_clickAnimation_bubble: {},

/**
 * @type {Object}
*/
btn_clickAnimation_spreadBorder: {},

/**
 * @type {String}
*/
btn_clickClass: null

5. More configuration options with default values.

/**
 * trigger scroll functions 
 * when press on any key that makes change on scrollTop (pg up/space/...)
 * @type {Boolean}
*/
scrollPress: true,

// Global animation duration
duration: 1000,

// Global animation timing function
easing: 'easeInOutCubic',

/*
 * scroll to target offset when click on selector
*/
scrollOnClick: {
  
  /**
   * @type {JQuery selector, array} 
  */ 
  clickOn: null,
  
  /**
   * unique selector(preferred id)
   * @type {JQuery selector} 
  */
  scrollTo: null,
  
  duration: 1400,
  
  easing: null,
  
  autoDetect: true
},

scrollOnClick_multi: {
  0: {
      clickOn: null,
      scrollTo: null,
      duration: null,
      easing: null
  },
  1: {
      clickOn: null,
      scrollTo: null,
      duration: null,
      easing: null
  }
}, 

Change log:

2017-03-10

• CSS update

2017-03-09

• Fixed IE 11 bug, scroll elements inside document.

2017-03-05

• Fixed scroll on click auto detect

2017-03-02

• Fixed scroll keys for inputs

2016-12-12

• Update JS

---

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