Version 1.0.6
An enhanced "back to top" and more, plugin for jQuery. With support for: top, bottom, sections, callbacks, smooth movement, mobile touch and fully customizable.
Begin by call the elevator core:
$(document).ready(function(){
$.elevator();
});You can customize where the elevator buttons panel should appear by using align argument:
$(document).ready(function(){
$.elevator({
align: 'bottom right' // default
});
});You can customize how the elevator buttons panel should look by using shape argument:
$(document).ready(function(){
$.elevator({
shape: 'circle' // default
});
});You can customize when the elevator should arrive by using speed argument:
$(document).ready(function(){
$.elevator({
speed: '1000' // default
});
});Those arguments: align, shape and speed are totally optional and their default values are: bottom right, circle and 1000 respectively.
$(document).ready(function(){
$.elevator({
align: 'top left' // (string) Align to Top and Left of the page
align: 'top right' // (string) Align to Top and Right of the page
align: 'bottom left' // (string) Align to Bottom and Left of the page
align: 'bottom right' // (string) Align to Bottom and Right of the page
shape: 'circle' // (string) Circle shape for elevator buttons panel
shape: 'rounded' // (string) Rounded shape for elevator buttons panel
shape: 'square' // (string) Square shape for elevator buttons panel
speed: 1000 // (integer) Speed of animation in milliseconds ( 1s )
});
});jQuery Elevator allow custom arguments to activate or set some functionalities on elevator element
You can activate the transparency of elevator should using glass argument:
$(document).ready(function(){
$.elevator({
glass: true // default (false)
});
});You can activate the auto-hide functionality for elements of elevator should using auto_hide argument:
$(document).ready(function(){
$.elevator({
auto_hide: true // default (false)
});
});You can define an element of DOM which act as top or bottom for elevator using the arguments ìtem_top and ìtem_bottom, setting a jQuery Object for this purpose:
$(document).ready(function(){
$.elevator({
item_top: $('#element-as-top')
item_bottom: $('#element-as-bottom')
});
});You can show or hide the TOP and BOTTOM buttons at elevator buttons panel, using the arguments show_top and show_bottom. Those buttons are default enabled:
$(document).ready(function(){
$.elevator({
show_top: true // default
show_bottom: true // default
});
});You can extended the TOP or BOTTOM zone with an extra margin, using the argument margin. While you are moving inside or outside the zone the elevator objects modify its appearance to make more intuitive.
$(document).ready(function(){
$.elevator({
margin: 100 // (integer) default - extra margin in pixels
});
});You can use a jQuery Object or an array of jQuery Objects to define a section list which the elevator will turn into buttons panel using the argument navigation:
$(document).ready(function(){
$.elevator({
navigation: $('h2') // (object) section list based on H2 elements
navigation: [ // (array) section list based on different elements
$('h1'),
$('h2.section_1'),
$('h2.section_2'),
$('h3')
]
});
});Those new section buttons can show a title if you define a data-title attribute in the right HTML element corresponding to the jQuery Object:
<html>
<body>
<h1 data-title="Important Stuff">Lorem ipsum dolor sit amet<h1>
</body>
</html>You can also show as content on section buttons at elevator buttons panel, the text defined in the HTML attribute data-title setting to true the attribute navigation_text:
$(document).ready(function(){
$.elevator({
navigation_text: true // default: false
});
});You can also show tooltips at elevator buttons panel, setting to true the attribute tooltips:
$(document).ready(function(){
$.elevator({
tooltips: true // default: false
});
});You can also use your own functions and code based on what happened while elevator is working using the callback functions provided:
$(document).ready(function(){
$.elevator({
onBeforeMove: function(){} // Execute Order: 0
onBeforeGoTop: function(){} // Execute Order: 1
onAfterGoTop: function(){} // Execute Order: 2
onBeforeGoBottom: function(){} // Execute Order: 1
onAfterGoBottom: function(){} // Execute Order: 2
onBeforeGoSection: function(){} // Execute Order: 1
onAfterGoSection: function(){} // Execute Order: 2
onAfterMove: function(){} // Execute Order: 3
});
});This is the full options list able for jQuery-elevator:
$(document).ready(function(){
$.elevator({
align: 'bottom right', // options: (string) 'top left' | 'top right'
// 'bottom left' | 'bottom right'
shape: 'circle', // options: (string) 'circle' (default) | 'rounded' | 'square'
speed: 1000, // options: (integer) 1000 (default | milliseconds)
speed: 1000, // options: (integer) 1000 (default | milliseconds)
glass: false // options: (boolean) true | false (default)
auto_hide: false // options: (boolean) true | false (default)
item_top: $('#item-as-top'), // options: (object) null (default)
item_bottom: $('#item-as-bottom'), // options: (object) null (default)
show_top: true, // options: (boolean) true (default) | false
show_bottom: true, // options: (boolean) true (default) | false
margin: 100, // options: (integer) 100 (default)
navigation: $('h2'), // options: (object) | array[(object)]
navigation_text: false, // options: (boolean) true | false (default)
tooltips: false // options: (boolean) true | false (default)
onBeforeMove: function(){}, // Execute Order: 0
onBeforeGoTop: function(){}, // Execute Order: 1
onAfterGoTop: function(){}, // Execute Order: 2
onBeforeGoBottom: function(){}, // Execute Order: 1
onAfterGoBottom: function(){}, // Execute Order: 2
onBeforeGoSection: function(){}, // Execute Order: 1
onAfterGoSection: function(){}, // Execute Order: 2
onAfterMove: function(){} // Execute Order: 3
});
});<html>
<body>
<h2 data-title="Title for Section">Lorem ipsum dolor sit amet<h2>
</body>
</html>You can use the external functions to control and manage some aspects from the elevator element, setting the elevator to a object variable:
$(document).ready(function(){
$.elevator({
var elevator = $.elevator();
elevator.reset_align(string);
elevator.reset_shape(string);
elevator.reset_speed(integer);
elevator.reset_glass(boolean);
elevator.auto_hide(boolean);
elevator.move_to( string | integer );
// move_to :: string: top | bottom
// move_to :: integer: section number ( should be higher than 0 )
});
});$(document).ready(function(){
$.elevator({
var elevator = $.elevator();
var elevator_settings = elevator.get_settings();
// get_settings :: return an asociative array
elevator.destroy();
});
});You can use the html data-elevator tag to create an standalone element which interacts with the elevator item:
<html>
<body>
<!-- Elevator :: Auto-Move to Top -->
<a href="#" data-elevator="top">Lorem ipsum dolor sit amet</a>
<!-- Elevator :: Auto-Move to section number -->
<a href="#" data-elevator="1">Lorem ipsum dolor sit amet</a>
<a href="#" data-elevator="2">Lorem ipsum dolor sit amet</a>
<a href="#" data-elevator="3">Lorem ipsum dolor sit amet</a>
<!-- Elevator :: Auto-Move to Bottom -->
<a href="#" data-elevator="bottom">Lorem ipsum dolor sit amet</a>
</body>
</html>- Salvador Saldaña
- Pablo Rosales