Back To Up yang satu ini menceritakan seola-olah kita sedang memancing, jika cacingnya kita klik maka kita akan di bawa pergi ke atas.
Oke sekarang adalah saatnya memasang Back Top Up Unik yang satu ini
</head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>]]></b:skin> atau </style>.cacing{background-image:url(http://2.bp.blogspot.com/-9-q2Kx2wEJ8/U10ep49ALqI/AAAAAAAAAY8/hicEo4x2Iv8/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">Balik ke atas lagi</div>
</div>
<div id="cacingTOP"></div>
Artikel ini di ambil dari Blog kang-mousir
Post a Comment