How to Make Button Back to Top, Sebagian besar template yang disediakan oleh para master template di internet sebagian besar tidak dipasangi Tombol Back to Top ini disebabkan para master membuat template ada yang full (Premium) dan ada juga hanya free (gratis). Seperti yang kita lihat di kembanyakan template premium sudah dilengkapi dengan tombol yang saya maksudkan tadi diatas sedangkan free jarang terdapat tombol ini. Nah, di posting kali ini saya akan membagikan script yang cocok untuk dipasang pada template yang belum mempunyai tombol back to top.
Tombol Back to Top ini jika discroll akan ada sedikit efek pantulan. Cobah Anda perhatikan pada blog ini
Cara pemasangannyapun cukup mudah, yuk kita ikuti bersama-sama caranya di bawah ini
1. Simpan kode jQuery di atas </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
Keterangan :
Jika pada template Anda telah terdapat code jQuery versi berapa saja, lewati saja yang ini
2. Letakkan kode javascript berikut tepat diatas kode </head>
atau diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#BounceToTop').slideDown(200);}
else {
$('#BounceToTop').slideUp(300);}
});
$('#BounceToTop').click(function () {
$('body,html').animate({scrollTop: 0}, 800).animate({scrollTop: 25}, 200).animate({scrollTop: 0}, 150).animate({scrollTop: 10}, 100).animate({scrollTop: 0}, 50);
});
});
//]]>
</script>
3. Simpan kode pemanggilnya tepat diatas kode </body>
<div id="BounceToTop"></div>
4. Terakhir Simpan CSS ini di atas ]]></b:skin>
atau di bawah kode </style>
#BounceToTop {
background: #888;
text-align: center;
position: fixed;
right: 10px;
bottom: 10px;
cursor: pointer;
padding: 5px;
width: 30px;
height: 20px;
display: none;
content: "";
border-radius: 2px;
}
#BounceToTop:before {
position: absolute;
border-style: solid;
bottom: 5px;
right: 5px;
width: 0;
height: 0;
border-color: transparent transparent #444 transparent;
border-width: 0 15px 20px 15px;
line-height: 0;
transition: all 0.3s ease-out;
}
right: 5px;
#BounceToTop:hover:before {
content: "";
position: absolute;
bottom: 5px;
width: 0;
height: 0;
line-height: 0;
border-style: solid;
border-width: 0 15px 20px 15px;
border-color: transparent transparent #ddd transparent;
}
border-style: solid;
#BounceToTop:after {
content: "";
position: absolute;
bottom: 5px;
right: 11px;
width: 0;
height: 0;
}
border-width: 0 9px 12px 9px;
border-color: transparent transparent #888 transparent;
line-height: 0;
5. Save dan lihat hasilnya
ADS HERE !!!