Membuat Back To Top Unik Dengan Cacing

Back to top ialah suatu tombol untuk kembali ke atas website tanpa harus memakai scrollbar. Back to top ini fungsinya untuk memudahkan pengunjung untuk kembali ke kepala suatu website dengan cepat. Kita sering menjumpai tampilan back to top yang biasa saja, namun berbeda dengan yang satu ini.

Back To Top yang satu ini seolah - olah kita sedang memancing, jadi ketika scrollbar digulung kebawah otomatis kail dengan cacing turun kebawah, ketika scrollbar digulung ke atas kail naik lagi ke atas. Lalu ketika kail dengan cacing di klik, scrollbar menggulung otomatis ke atas. Artikel ini pernah ditulis oleh Make Attractive Back to Top Cacing Theme, oleh alasannya ialah itu Saya tulis ulang di blog ini.

Cara Memasang Back To Top

1. Template Anda harus sudah terpasang jQuery Libary, jikalau belum pasang jQuery ini diatas arahan </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Simpan arahan ini diatas arahan ]]></b:skin> atau </style>

.cacing{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqQgWZ8g-USqBJSBO1jKYo5gDQucQ93vjM3Z7O_77Nejx73cFOjlWax_gtH4ipF10IvkzyfGXaRpDLLgat1VQ3gbD3Tph9foNzVNQOVYXWNa2xMSzZd_dGP-vZa0xcoPvoD74Lb02sP3L9/s1600/Cacing.png);background-repeat:no-repeat;position:relative} #cacing{cursor:pointer;width:30px;height:530px;background-size:41px;position:fixed;top:-550px;left:7%;transition:all .7s ease-in-out;-webkit-transition:all .7s ease-in-out;z-index:21} #cacing-bubble{background:#fff;border-radius:50px;color:#06f;display:block;font-size:12px;line-height:14px;opacity:0;overflow:visible;padding:5px;position:absolute;top:445px;left:20px;text-align:center;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:hidden;width:60px;height:auto;z-index:99} #cacing:hover > #cacing-bubble,#cacing:hover > #cacing-bubble:after{opacity:1;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:visible} #cacing-bubble:after{border-bottom:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;border-left:5px solid #fff;content:"";display:block;position:absolute;top:96%;left:10px;width:0;height:0;z-index:98}

3. Kemudian simpan arahan ini diatas arahan </body>

<script type='text/javascript'> //<![CDATA[ jQuery(document).ready(function($) {  $(window).on('scroll', false, function() {   var windowTop = $(window).scrollTop();   if (windowTop > 550) {    $('#cacing').css('top', '0');   } else {    $('#cacing').css('top', windowTop - 550 + 'px');   }  });  $('#cacing').unbind('click').click(function() {   $('html,body').animate({    scrollTop: $("#cacingTOP").offset().top   }, 'slow');  }); });  //]]> </script>

4. Lalu simpan arahan ini dibawah arahan <body>

<div class="cacing" id="cacing"> <div id="cacing-bubble">Kembali ke atas!</div> </div> <div id="cacingTOP"></div>

Demo

Silakan Anda ganti goresan pena yang Saya tandai sesuai dengan keinginan. Bagaimana unik bukan tentunya beda dari yang lain ;)
Sumber http://kang-mousir.blogspot.com

Membuat Back To Top Unik Dengan Cacing

4/ 5

Oleh Admin