Membuat Scroller Up Button
Pada kesempatan kali ini, saya akan membagikan sebuah teknik yang banyak digunakan oleh website yaitu scroller up button. Nah showcasenya bisa dilihat disini http://www.dijaminmurah.com (Web hosting murah indonesia kualitas OK !). Seketika anda scroll website tersebut dibawah anda akan melihat adanya tombol button up.
Ini yang akan kita buat :
Ketika anda klik button tersebut maka window tadi akan bergerak ke atas dan kemudian menghilang kemudian ketika anda scroll down lagi maka button tersebut muncul kembali dan seterusnya.
Untuk dapat membuat ini kita membutuhkan 2 hal yaitu CSS + JQuery. Pertama kita akan membuat layoutnya terlebih dahulu.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Scroller up Button</title>
</head>
<body>
<div id="topButton"></div>
<div>
<h1>Text yang panjang</h1>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h1>Text yang panjang</h1>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
</div>
</body>
</html>
Anda akan mendapatkan teks yang berulang – ulang dengan menggunakan code ini tetapi anda bebas berkreasi sesuka hati. Setelah anda memiliki teks panjang hingga memicu timbulnya scroller disamping, hal berikutnya yang ditambahkan adalah button scroller.
Tambahkan style berikut :
<style media="all" type="text/css">
#topButton{
position:fixed;
width:52px;
height:59px;
right:1%; /* dari kanan 1% */
bottom:1%; /*dari bawah 1% */
cursor:pointer; /* mengubah cursor menjadi penunjuk*/
background:url(green_arrow_up.png) no-repeat top left;
}
#topButton:hover{
background:url(green_arrow_up-hover.png) no-repeat top left;
}
</style>
Ups apa yang terjadi ?. Kita telah memberikan style kepada topButton. Kita set width dan heightnya sesuai dengan image yang digunakan dalam hal ini adalah “green_arrow_up.png”. Untuk mendapatkan posisi yang statis (tidak berubah ketika discroll) maka set position menjadi fixed.
Anda akan mendapatkan preview seperti dibawah.
Ok sampai disini telah 50% berjalan. Setelah itu kita masuk ke bagian script. Tambahkan script berikut ke sebelum tag penutup body :
<script type="text/javascript" language="javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var scrollingup = false;
$(window).scroll(function()
{
if(!scrollingup){
if($(window).scrollTop() > 0){
$("#topButton").fadeIn('normal');
}else{
$("#topButton").fadeOut('normal');
}
}
});
$("#topButton").click(function(){
scrollingup = true;
$('html').animate({scrollTop:0}, 'slow',function(){scrollingup = false});
$("#topButton").fadeOut('normal');
return false;
})
});
</script>
Script diatas sangatlah simple. Mulailah melihat dari
$(window).scroll(function()
{
if(!scrollingup){
if($(window).scrollTop() > 0){
$("#topButton").fadeIn('normal');
}else{
$("#topButton").fadeOut('normal');
}
}
});
Script ini adalah untuk mengecek posisi scroll window. Apabila scroll tidak bergerak maka ia berada dalam posisi 0 dan ketika bergerak maka nilai posisinya akan lebih dari 1. Hal selanjutnya adalah penambahan efek Fade In ketika scroll bergerak (nilai posisi > 0).
Script berikutnya untuk memicu apakah anda telah menekan scroller up button tersebut.
$("#topButton").click(function(){
scrollingup = true;
$('html').animate({scrollTop:0}, 'slow',function(){scrollingup = false});
$("#topButton").fadeOut('normal');
return false;
})
Apa yang terjadi disini adalah ketika scroller up button di-click maka window akan tertarik ke atas dan button akan di fadeOut.
Dan apa yang kemudian variabel scrollingup lakukan ?
Variabel ini penting dan bertindak sebagai penanda bahwa ketika scrollup terjadi maka pengecekan if($(window).scrollTop >0) tidak dilakukan. Efek Fadeout yang berulang akan terjadi ketika anda mengabaikan variabel scrollingup ini. Variabel ini juga kembali direset ke posisi awal ketika scroller sudah mencapai puncaknya / nilai posisi = 0 (lihat line-4 code diatas).
Nah setelah semuanya selesai anda akan melihat satu kejanggalan yaitu ketika anda membuka halaman untuk pertama kalinya scroller up button kelihatan, Bagaimana cara menghilangkannya ? Hilangkan saja dengan tambahkan display : none pada css diatas.
code akhir :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Scroller up Button</title>
<style media="all" type="text/css">
#topButton{
position:fixed;
width:52px;
height:59px;
right:1%;
bottom:1%;
cursor:pointer;
background:url(green_arrow_up.png) no-repeat top left;
display:none;
}
#topButton:hover{
background:url(green_arrow_up-hover.png) no-repeat top left;
}
</style>
</head>
<body>
<div id="topButton"></div>
<div>
<h1>Text yang panjang</h1>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h1>Text yang panjang</h1>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
<h2>Text yang panjang</h2>
<p>...</p>
</div>
<script type="text/javascript" language="javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var scrollingup = false;
$(window).scroll(function()
{
if(!scrollingup){
if($(window).scrollTop() > 0){
$("#topButton").fadeIn('normal');
}else{
$("#topButton").fadeOut('normal');
}
}
});
$("#topButton").click(function(){
scrollingup = true;
$('html').animate({scrollTop:0}, 'slow',function(){scrollingup = false});
$("#topButton").fadeOut('normal');
return false;
})
});
</script>
</body>
</html>
Sekian dulu para sahabat interaktif, selamat mencoba dan jangan lupa beri komentarnya.
Related Posts
Add Comment
Loading ...