Tuesday, October 6, 2015
Advertisement
Advertisement
Pada website yang berisi konten yang sangat panjang seperti website portal, akan sangat merepotkan sekali jika kita sudah mencapai batas halaman kemudian ingin kembali ke bagian atas halaman. Mau tidak mau kita harus kembali ke atas dengan menggunakan scroll mouse dan tentunya sangat membuang waktu dan bisa berakibat negatif pula pada mouse anda sekarang .
Maka dari itu Skrip animasi scroll go to top ini memang sangat diperlukan sekali saat keadaan tersebut. Ketika kita menscroll ke bawah maka akan muncul sebuah tombol yang melayang pada area pojok dan tentunya untuk penentuan penempatan elemen bisa anda tentukan sendiri nantinya di skrip kodinganya .
Agar tampak lebih menarik, maka ditambahkan sedikit animasi saat menuju ke atas halaman. Animasi pada fasilitas scroll to top dapat dibuat menggunakan JQuery dengan mudah. Maka untuk mengurangi rasa penasaran, silahkan coba skrip berikut :
Memahami apa itu Selector pada JQuery .
scroll-top.html
<html>
<head>
<style type="text/css">
.t-top{
width: 0;
height: 0;
position: fixed;
right:40px;
bottom: 40px;
border-left:15px solid transparent;
border-right:15px solid transparent;
border-bottom:20px solid black;
content: "";
z-index: 400;
}
.lbr{
height:900px;
}
.fixCenter{
top:50%;
bottom: 50%;
margin:0 auto;
font-size: 1.3em;
color:red;position: fixed;font-weight: bold;font-family: segoe-ui;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
</head>
<body>
<div class="lbr">
<a class="t-top"></a>
<span class="fixCenter">indonesiakode.blogspot.com</span>
</div>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 200){
$('.t-top').fadeIn();
}
else{
$('.t-top').fadeOut();
}
});
$(".t-top").click(function(){
$("html,body").animate({scrollTop:0},600);
return false;
});
});
</script>
</body>
</html>
- Pada selector $('t-top') merupakan elemen pada line number 33 .
- Pada line number 46-47 Ketika elemen dengan class .t-top ditekan / diklik maka akan memerintahkan selector html dan body akan memberikan efek animate dengan scrollTop menuju ke angka 0 dengan kecepatan 600 .
Mohon maaf kalau icon to topnya menggunakan triangle, dikarenakan dapat menghemat waktu saja. Silahkan melakukan experimen dengan kode di atas, bisa anda tembahkan sedikit background:url() juga bisa .
Jangan seperti anak kecil yang sukanya hanya melakukan yang instan saja tidak mau usaha sendiri .
Semoga bermanfaat .
Advertisement
Advertisement