Floating Scroll To Top

Demo

Letakkan di atas </b:skin>

#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJj2TmhSFWAJEbWl3_vdtPk6SKGrMwA9RsX50Gr0Gj8ZZb6nFn1dySEE_FTwDR2WXm22G98YRONLowf44L18T5X3gC06_7AKQ_xLTR5syg4ejGYmDHHgHkG-xtVEJH9P0_N3pO1ah8hsU/s1600/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhtXcchWOzKrwLAWJEtJxO_V4UwR8UtJxwI2zmxcj-c9-ESxEz-t_iJ3z2sVEezmXzehe0jjrz6Whg14u5hadqF96i_sB9h1_YBLyyoRsaTfk7_uKfE1nBwPh9envrCcdWp1sQdxxWXjU/s1600/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSnWsim1ojkSLxuJJkf60Gx291m1QoWgXy0T-GgxHbNkSqC-F84EL1M9BOcprqHJK6MxpLYezKNnfMuovrieDl4uJQCLqUuuxZb3DcI8cEGr5M9uGdJAORT7Y3twmsEEgAx4RC9R7pR1A/s1600/code_arrow.png) 0 0 no-repeat;
position: absolute;
right: -6px;
bottom: 14px
}

Letakkan di atas </body>

<div id="elevator_item">
<a href="#" id="elevator" onclick="return false;" title="Back To Top"></a>
<a class="qr" href="/"></a>
<div class="qr-popup">
 <a class="code-link" href="/"> <img class="code" src="http://chart.apis.google.com/chart?chs=150x150&amp;cht=qr&amp;&amp;chl=http://jquery-my.blogspot.com" /> </a> <span>jQueryScript</span>
<div class="arr">
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://sites.google.com/site/jqueryfold/js/app%20jQuery-Scroll-To-Top-Barcode-Plugin.js" type="text/javascript"></script>

Save