Cara Membuat Tombol Back to Top
Ohayou Gozaimasu Minna-san ^^
Tadikan mimin abis buat Template, Nah sekarang Mimin mau Berbagi Tutorial Baru nih
Yaitu
CARA MEMBUAT TOMBOL BACK TO TOP
Caranya Cukup Mudah kok :)
Asalkan Kalian Pahami dengan teliti pasti Bisa :)
DEMO
Langsung saja ikuti cara dibawahnya ^^
Silahkan Masukkan CSS ya diatas </style> / </b:skin>
#BackToTop {z-index:90;position:fixed;bottom:15px;right:-80px;overflow:hidden;display:none;
background:#fff;color:#444;padding:9px 13px;font-size:25px;box-shadow:0 0 0 1px #ddd;-webkit-transform: translateZ(0);transition:all .5s ease-out;}
#BackToTop:hover {background:#f26d7d;color:#fff;box-shadow:0 0 0 1px transparent;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;opacity:1}
Setelah itu, Masukkan Javascriptnya Tepat di atas </body>
<script TYPE='text/javascript'>
jQuery(document).ready(function($){
var $ele = $('#BackToTop');
$(window).scroll(function() {
$(this).scrollTop() >= 200 ? $ele.show(10).animate({ right : '15px' }, 10) : $ele.animate({ right : '-80px' }, 10);
});
$ele.click(function(e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 400);
});
});
</script>
<a HREF='#' id='BackToTop'><i class='fa fa-angle-up'/></a>
<script src='https://googledrive.com/host/0B6G3XEDWZaMaUWZGRkJNdGg2bWM' type='text/javascript'/>
<script src='https://googledrive.com/host/0B6G3XEDWZaMaOFRtR2kzckx6bkE' type='text/javascript'/>
<script src='https://googledrive.com/host/0B6G3XEDWZaMaRy1Qa1RiTDl6T0E' type='text/javascript'/>
Jika ingin Mengganti Warnanya,
Silahkan Cari #FFF dan Ganti Warna Sesuai Selera Anda
Jika ingin Mengganti Warnanya jika di Sentuh oleh Cursor,
Silahkan Cari #f26d7d dan Ganti Warna Sesuai Selera Anda
Nah, jika ada masalah silahkan Komentar Dibawahnya.
Pengunjung yang baik, pasti akan meninggalkan Komentarnya,
Biarpun itu hanya Pertamax! / Sankyuu
Jangan Lupa Like & Share yah ! (y)
No comments