Berikut merupakan tutorial tentang cara membuat animasi scroll halaman web ke atas. Prinsip kerjanya cukup sederhana, nantinya apabila Anda melakukan scroll halaman kebawah maka tombol untuk kembali keatas akan muncul. Apabila tombol tersebut diklik, halaman akan kembali keatas dengan sendirinya. Untuk lebih jelasnya Anda dapat melihat demo dibawah.
Langkah 1
Buatlah halaman web seperti biasa yang tentunya sudah terisi dengan konten. Kemudian berikan id pada tag body misal “#atas”. Nantinya id ini akan digunakan sebagai link pada tombol scroll yang akan dibuat.
Langkah 2
Buatlah tombol scroll “ke atas” dan tujukan link tombol tersebut ke id body, kemudian berikan style CSS.
HTML
<p id="keatas"> <a href="#atas"><span></span>Ke atas</a> </p>
CSS
#keatas {
position: fixed;
bottom: 30px;
margin-left: -150px;
}
#keatas a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#keatas a:hover {
color: #000;
}
/* icon panah */
#keatas span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(up-arrow.png) no-repeat center center;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#keatas a:hover span {
background-color: #777;
}
Langkah 3
Terakhir berikan syntax jQuery agar animasi scroll dapat bekerja dengan baik.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
// menyembunyikan id #keatas
$("#keatas").hide();
// memberikan efek fade in pada id #keatas
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#keatas').fadeIn();
} else {
$('#keatas').fadeOut();
}
});
// scroll halaman ke 0px (ke body) ketika diklik
$('#keatas a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
