Membuat Back To Top Unik Dengan Cacing

Membuat Back To Top Unik Dengan Cacing

Back to top adalah suatu tombol untuk kembali ke atas website tanpa harus menggunakan 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 saat scrollbar digulung kebawah otomatis kail dengan cacing turun kebawah, saat scrollbar digulung ke atas kail naik lagi ke atas. Lalu saat kail dengan cacing di klik, scrollbar menggulung otomatis ke atas. Artikel ini pernah ditulis oleh +Beben Koben pada Make Attractive Back to Top Cacing Theme, oleh karena itu Saya tulis ulang di blog ini.

Cara Memasang Back To Top

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2. Simpan kode ini diatas kode ]]></b:skin> atau </style>

.cacing{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQaZbXALdCk2FC9OgLFKb0oimvOjXjy2megrsemKV19UB_DJjaYFPhzpoLVmty0VTEc_7nXLaBrY6lswhDT775ColALIWRCDjshoXH7kp2qcnnUpQ060A9xzkh7AJl7Go7vVpDkVTA0iQd/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 kode ini diatas kode </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 kode ini dibawah kode <body>

<div class="cacing" id="cacing">
<div id="cacing-bubble">Kembali ke atas!</div>
</div>
<div id="cacingTOP"></div>
Silakan Anda ganti tulisan yang Saya tandai sesuai dengan keinginan. Bagaimana unik bukan tentunya beda dari yang lain ;)

Artikel Terkait

Komentar

Rizky Kurniawan
mantab kang pluginnya.
kalau seperti ini ingat spongebob di episode dilarang bermain ke pengait :v
Kang Mousir
haha betul sob, kayak di spongebob yang ditarik sama kail :lol:
Unknown
wkwkwk... :D jadi kaya animasi ya kang. unik dan keren. baru pertama kali liat yg satu ini.
kita kayak ikan yang dipancing ke atas dengan pakannya cacing. xixi
Kang Mousir
iya sob, tapi demo aslinya lebih keren. Seolah - olah kita sedang memancing ikan dengan menggunakan jquery seolah - olah ikannya hidup
Cek sini >> myblogsharingpost.wordpress.com
Unknown
haha nama css classnya kok cacing kang lucu :D
tapi patut dicoba ini trimakasih kang :D
Kang Mousir
Back Top Top nya juga cacing, jadi class nya juga cacing :D
sama - sama
Unknown
saya kira cacing cacing di perut curi semua nutrisi :D, ternyata mengenai memancing :D
Kang Mousir
haha bukan sob, ini back to top cuma stylenya cacing :D
BroCay
wkwkwk gokil tombol back to topnya...
Kang Mousir
Yang aslinya lebih keren lagi ;) myblogsharingpost.wordpress.com
Anonim
makasih gan suskes
Anonim
iya gan kok kembali ke bawah

Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.

Jangan salahkan Saya bila komentar Anda dihapus !

Batal