Easy Configurable Scroll To Top Back Button Plugin - illbeback

File Size: 7.78 KB
Views Total: 4348
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Easy Configurable Scroll To Top Back Button Plugin - illbeback

I'll Be Back is a simple yet highly customizable jQuery plugin used for creating a scroll to top button to enhance navigation experience on webpage with long content.

How to use it:

1. Download and put the jQuery illbeback plugin's script after jQuery library.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="illbeback.min.js"></script>

2. Create an anchor link for the scroll to top button.

<a href="" id="scroll-to-top"></a>

3. Initialize the plugin to generate a default scroll to top button that stays at the bottom right of the webpage when you scroll down.

$("#scroll-to-top").illBeBack();

4. Config the scroll to top button with the following options.

$("#scroll-to-top").illBeBack({

  // top offset to trigger the scroll to top button
  offset        : 250,

  // animation speed
  speed         : 200,

  // animation duration
  duration      : 500,

  // animation duration for hover effect
  hoverDuration : 300,

  // Styling options
  ownStyle : false,
  round    : false,
  zIndex   : 1000,
  size     : 64,

  // Position options
  top    : 'auto',
  left   : 'auto',
  bottom : 30,
  right  : 30,

  // Background options
  bgColor : 'rgba(30, 30, 30, 0.4)',
  hoverBgColor : 'rgba(30, 30, 30, 0.8)',
  bgPosition : '50% 50%',
  bgSize : '50%',
  bgRepeat : 'no-repeat',
  bgImage : "url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAA8CAMAAACuCk+GAAAAVFBMVEUAAAD" +
  "///////////////////////////////////////////////////////////////////////////////////////////////////////////" +
  "8wXzyWAAAAHHRSTlMAv3FsR04ETZV7qzmMQwNjpYSBbbaedD8lCCghrxzLjAAAATlJREFUeAG10ctOwzAUhOHpBePYSdM2vbTw/u+JkIyUs" +
  "mCU/5BZ+kjfv7AWLNVtn3M/1YNW2b1s2o51DX+3mW38f3+7edluZZ8XvM8L3ucF7/MC93nB+7zgfV7wPi9wnxe8zwve5wXv84L3eYH7vsB9" +
  "X+A+L3DfF7jvC9z3Be7zAvd9gfu2wH1T4L4pcH//7gpBX7KFoL+ggPwFBeSDAvDlC9AHBeCDAvClN18APigAHxS8L1gAPijsqO8LoyQN3Pe" +
  "FKj0L933hmDSEfFu4q4v5rnDTNeibQlYJ+qZw1DXom0LWOeibQqd90DeFQc8L932hpHaK+n8yHfdd4abvpTP2TaE7qBWgbwo/vpROxDeF5r" +
  "fC7B8ug/D2M397eD2V9t5/KrBHbkwZ9GupTn0+jQ8F9zGecj/VpLYvzkEQTeC4sD8AAAAASUVORK5CYII=\")"
  
});

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