jQuery Plugin For Scroll To Top / Bottom Buttons - elevator

elevator is a jQuery plugin to generate up / down buttons which allows the user to scroll the page to top (or bottom) with a smooth scrolling effect.

How to use it:

1. Load the required stylesheet in the head section.

<link rel="stylesheet" href="jquery-elevator.css">

2. Create top / bottom anchors.

<div id="top" class="elevator"></div>
...
<div id="bottom" class="elevator"></div>

3. Load jQuery library and the jQuery elevator plugin at the bottom of the document.

<script src="jquery.min.js"></script>
<script src="src/jquery-elevator.js"></script>

4. Initialize the plugin with default options.

$.elevator();

5. Available options.

$.elevator({
/**
a setting to enable go to top button.
@property show_top
@type Boolean
@default true
*/
show_top: true,

/**
a setting to enable go to bottom button.
@property show_bottom
@type Boolean
@default true
*/
show_bottom: true,

/**
a setting to establish an item which acts as top.
@property item_top
@type Object
@default null
*/
item_top: null,

/**
a setting to establish an item which acts as bottom.
@property item_bottom
@type Object
@default null
*/
item_bottom: null,

/**
a setting to establish the position of the elevator object.
@property align
@type String
@default 'bottom right'
*/
align: 'bottom right',

/**
a setting to establish the list of navigation items.
@property navigation
@type Object[]
@default []
*/
navigation: [],

/**
a setting to enable text for navigation items.
@property navigation_text
@type Boolean
@default false
*/
navigation_text: false,

/**
a setting to establish an extra margin for top and bottom sections.
@property margin
@type Number
@default 100
*/
margin: 100,

/**
a setting to establish the speed of animation.
@property speed
@type Number
@default 1000
*/
speed: 1000,

// options: (string) 'circle' (default) | 'rounded' | 'square'
shape: 'circle',            
         
/**
a setting to enable glass translucent effect.
@property glass
@type Boolean
@default false
*/
glass: false,

/**
a setting to enable title tooltips.
@property tooltips
@type Boolean
@default false
*/
tooltips: false,

/**
a setting to establish the callback before general movement.
@property onBeforeMove
@type Function
@default Function
*/
onBeforeMove: function(){},

/**
a setting to establish the callback after general movement.
@property onAfterMove
@type Function
@default Function
*/
onAfterMove: function(){},

/**
a setting to establish the callback before top movement.
@property onBeforeGoTop
@type Function
@default Function
*/
onBeforeGoTop: function(){},

/**
a setting to establish the callback after top movement.
@property onAfterGoTop
@type Function
@default Function
*/
onAfterGoTop: function(){},

/**
a setting to establish the callback before bottom movement.
@property onBeforeGoBottom
@type Function
@default Function
*/
onBeforeGoBottom: function(){},

/**
a setting to establish the callback after bottom movement.
@property onAfterGoBottom
@type Function
@default Function
*/
onAfterGoBottom: function(){},

/**
a setting to establish the callback before section movement.
@property onBeforeGoSection
@type Function
@default Function
*/
onBeforeGoSection: function(){},

/**
a setting to establish the callback after section movement.
@property onAfterGoSection
@type Function
@default Function
*/
onAfterGoSection: function(){}
});

Change logs:

2015-07-20

• v1.0.6

2015-06-17

• v1.0.2
• Updated example and default style

2015-06-14

• Refactored code

2015-06-11

• JS & CSS update.

2015-06-03

• Cleaning up code with better implementation.

2015-06-02

• Adding missing append for nav_list

 

---

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