Easy Configurable Scroll To Top Back Button Plugin illbeback - Download Easy Configurable Scroll To Top Back Button Plugin - illbeback

Download Easy Configurable Scroll To Top Back Button Plugin – illbeback

By Posted on

This time I will share jQuery Plugin and tutorial about Easy Configurable Scroll To Top Back Button Plugin – illbeback, hope it will help you in programming stack.

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

Demo Download

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.

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

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

view source
1 <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.

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

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

view source
01 $("#scroll-to-top").illBeBack({
02  
03   // top offset to trigger the scroll to top button
04   offset        : 250,
05  
06   // animation speed
07   speed         : 200,
08  
09   // animation duration
10   duration      : 500,
11  
12   // animation duration for hover effect
13   hoverDuration : 300,
14  
15   // Styling options
16   ownStyle : false,
17   round    : false,
18   zIndex   : 1000,
19   size     : 64,
20  
21   // Position options
22   top    : 'auto',
23   left   : 'auto',
24   bottom : 30,
25   right  : 30,
26  
27   // Background options
28   bgColor : 'rgba(30, 30, 30, 0.4)',
29   hoverBgColor : 'rgba(30, 30, 30, 0.8)',
30   bgPosition : '50% 50%',
31   bgSize : '50%',
32   bgRepeat : 'no-repeat',
33   bgImage : "url("data:image/png;base64

source : jqueryscript.net

Related posts: