Tombol Back to Top

Tombol Back to Top versi tapike.com

HTML

<a href="#" class="back-to-top"><img src="http://2.bp.blogspot.com/-LEVAhq7S2lM/VfR9zkfXuuI/AAAAAAAACtY/t_Ga73lzP-g/s1600/back-to-top.png" alt="Back to Top"/></a>
<center>
<div style="height:70px;width;600px;margin:0 auto;background:#ff5848;"><img src="http://3.bp.blogspot.com/-lKWA92T4CaE/VW04pDcTulI/AAAAAAAACVk/XS77ZXZw3U0/s1600/tapike-logo.png" title="Tapike.com" alt="Tapike.com"height="70px" width="270px"/></div>
    <h2>Scroll down</h2></center>
<div style="width:600px;margin:0 auto;text-align:justify;">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/tapikecom&amp;width&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:62px;" allowTransparency="true"></iframe>
<!-- Tempatkan tag ini di head atau tepat sebelum tag body penutup. -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'id'}
</script>

<!-- Tempatkan tag ini di mana pun Anda ingin widget ditampilkan. -->
<div class="g-page" data-width="292" data-href="//plus.google.com/+Tapikecom" data-layout="landscape" data-rel="publisher"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus, tortor sit amet rhoncus lobortis, leo libero suscipit justo, ac tincidunt ligula eros sit amet sem. Sed lobortis nisl sed diam porttitor, quis lacinia felis lacinia. In urna nulla, consectetur nec nisi vitae, laoreet pellentesque augue. Donec feugiat, velit eu imperdiet semper, ante sem suscipit nulla, congue suscipit ipsum tellus commodo ipsum. Sed pharetra orci a volutpat faucibus. 

Donec feugiat, velit eu imperdiet semper, ante sem suscipit nulla, congue suscipit ipsum tellus commodo ipsum. Sed pharetra orci a volutpat faucibus. 

Sed lobortis nisl sed diam porttitor, quis lacinia felis lacinia. In urna nulla, consectetur nec nisi vitae, laoreet pellentesque augue. 

Sed...

CSS

div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}

JavaScript

jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});