jQuery Scroll To Top and Barcode Plugin

A lightweight jQuery plugin used to create a floating bar containing a scroll to top button and a barcode at the bottom right of your page. The floating bar will auto display (hide) when you scroll down (up) the page.

You might also like:

• Simple Back To Top Link
• Smooth Page Scroll to Top with jQuery
• Lightweight Animated Scroll To Top Plugin - scrollUp
• Imageless Top of The Page Plugin For jQuery - iTopPage
• Beautiful Back-To-Top Button
• Simple jQuery Scroll To Top Plugin

How to use it:

1. Include jQuery javascript library at the bottom of your web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

2. Create the html for the floating bar. Don't forget to replace the barcode image source with yours.

<div id="elevator_item"> 
<a id="elevator" onclick="return false;" title="Back To Top"></a> 
<a class="qr"></a>
<div class="qr-popup"> <a class="code-link"> <img class="code" src="http://chart.apis.google.com/chart?chs=150x150&cht=qr&&chl=https://www.jqueryscript.net"/> </a> <span>jQueryScript</span>
<div class="arr"></div>
</div>
</div>

3. The CSS

<style>
#elevator_item {
width: 60px;
height: 100px;
position: fixed;
right: 15px;
bottom: 10px;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
opacity: 1;
z-index: 100020;
display: none;
}
#elevator_item.off {
opacity: 0;
visibility: hidden
}
#elevator {
display: block;
width: 60px;
height: 50px;
background: url(img/icon_top.png) center center no-repeat;
background-color: #444;
background-color: rgba(0,0,0,.6);
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
cursor: pointer;
margin-bottom: 10px
}
#elevator:hover {
background-color: rgba(0,0,0,.7)
}
#elevator:active {
background-color: rgba(0,0,0,.75)
}
#elevator_item .qr {
display: block;
width: 60px;
height: 40px;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
cursor: pointer;
background: url(img/icon_code.png) center center no-repeat;
background-color: #444;
background-color: rgba(0,0,0,.6)
}
#elevator_item .qr:hover {
background-color: rgba(0,0,0,.7)
}
#elevator_item .qr:active {
background-color: rgba(0,0,0,.75)
}
#elevator_item .qr-popup {
width: 170px;
height: 200px;
background: #fff;
box-shadow: 0 1px 8px rgba(0,0,0,.1);
position: absolute;
left: -180px;
bottom: 0;
border-radius: 2px;
display: none;
text-align: center
}
#elevator_item .qr-popup .code-link {
display: block;
margin: 10px;
color: #777
}
#elevator_item .qr-popup .code {
display: block;
margin-bottom: 10px
}
#elevator_item .qr-popup .arr {
width: 6px;
height: 11px;
background: url(img/code_arrow.png) 0 0 no-repeat;
position: absolute;
right: -6px;
bottom: 14px
}
</style>

4. The javascript

$(function() {
$(window).scroll(function(){
var scrolltop=$(this).scrollTop();
if(scrolltop>=200){
$("#elevator_item").show();
}else{
$("#elevator_item").hide();
}
});
$("#elevator").click(function(){
$("html,body").animate({scrollTop: 0}, 500);
});
$(".qr").hover(function(){
$(".qr-popup").show();
},function(){
$(".qr-popup").hide();
});
});

---

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