Membuat Back To Top Unik Dengan Cacing
|
21:43 |
No Comments |
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>]]></b:skin> atau </style>.cacing{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm5arHzcV8KyEyCkvL335nOIjrV4Bf2isJ7Fd5WsImEqLqqR6UwHQBhRvcENKJdkT2aTAKHXT2Ci6iDJSPiOAP8yqthVThgAeQDIiJsOqYusspd53vplwzN4szv1JyQedKhDAH45Zi_yJx/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}</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><body><div class="cacing" id="cacing">
<div id="cacing-bubble">Kembali ke atas!</div>
</div>
<div id="cacingTOP"></div>
0 comments:
Post a Comment