Animasi Scroll to Top dengan Jquery

Saya yakin anda pasti pernah membuka website yang memiliki konten sangat banyak sehingga terlihat sangat panjang kebawah.

Pengunjung pasti akan dibuat sebal ketika sampai dibagian paling bawah website dan sulit untuk kembali ketas, karena harus melakukan scroll terus-menerus (beruntung kalau mouse dilengkapi tombol scroll, jika tidak? hm….capek deh).

Pada tulisan ini saya akan mencoba membuat solusi bagaimana agar dengan sekali klik maka anda akan dibawa kembali ke bagian atas website dengan animasi (sekarang sudah banyak website yang menggunakan cara seperti itu).

Sebenarnya secara sederhana bisa dibuat dengan menggunakan HTML saja, karena sudah tersedia atribut [a title] yang dimiliki tag [a] [/a] yaitu untuk melakukan link ke satu bagian di halaman yang sama.

contoh penggunaan : [a href=”#tujuan”] dan [a title=”tujuan”] namun dengan cara tersebut kurang menarik karena tidak ada animasinya, dan terlalu cepat, dan kadang membuat bingung karena tidak ada transisi perpindahannya.

Langsung saja, yang akan dibuat adalah sebagai berikut.

Demo Download


HTML

index.html

Kita membutuhkan sebuah file html, disini akan disisipkan script JQuery serta CSS (dalam demo saya meng-embed dua buah font dari google font directory)
Yaitu : Permanent Marker dan Annie Use Your Telescope


<html>
<head>
<title>Back to Top Demo : Izulchaniago</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function(){

	$("#to-top").hide();
	
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 200) {
				$('#to-top').fadeIn();
			} else {
				$('#to-top').fadeOut();
			}
		});	
		
		$('#to-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});

});
</script>
</head>
<body>

<div id="container">
	<div class="header">
		<h1><a href="http://izulchaniago.com">Izulchaniago</a></h1>
		<p>Demo Scroll to Top</p>
		<p><a id="down" href="#footerlink"><img src="down.png"></a></p>
		<p>please scroll down now!</p>
	</div>
	
	<div class="content">
	
	<!-- Tuliskan konten dibagian ini -->
	
	</div>
	
	<div class="footer">Copyright &copy; 2011 <a name="footerlink" href="http://izulchaniago.com">Izulchaniago.com</a></div>
</div>

<p id="to-top">
	<a href="#top">
		<span></span>
		Bring me to Top
	</a>
</p>
<div id="gototutorial"><a href="#">&laquo; back to tutorial</a></div>

</body>
</html>

Penjelasan script jquery yang kita gunakan

$(document).ready(function(){

	$("#to-top").hide();
	
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() &gt; 200) {
				$('#to-top').fadeIn();
			} else {
				$('#to-top').fadeOut();
			}
		});	
		
		$('#to-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});

});

Script diatas pertama akan menyembunyikan elemen dengan ID to-top

$(“#to-top”).hide();

Selanjutnya jika kita melakukan scroll sebanyak 200 pixel kebawah maka elemen dengan ID to-top akan ditampilkan
Jika belum mencapai angka 200 maka akan tetap disembunyikan.
element dengan id=”to-top” itu akan tampil di kanan bawah, dengan posisi tetap tidak akan berubah walaupun kita scroll down halaman web.
Jika kita melakukan klik, maka kita akan dibawa ke posisi 0 yaitu bagian atas halaman web

Baca Juga:  Mengganti Scroll Browser dengan CSS3

CSS

Untuk membuat elemen dengan ID to-top pada posisi tetap (fixed) dibutuhkan script css sebagai berikut

	#to-top {
		position: fixed;
		bottom: 50px;
		margin-left: 950px;
	}

Berikut adalah script CSS (style.css) selengkapnya yang digunakan dalam demo.



body{
	background:#000 url(pattern.png) fixed;
	font-family: Arial, Helvetica, sans-serif;
}
h1{
	font-family: 'Permanent Marker', arial, serif;
	margin: 0 0 10px;
	color: #f4f4f4;
	text-align:center;
}
h2{
	font-family: 'Permanent Marker', arial, serif;
	margin: 0 0 10px;
	color: #f4f4f4;	
}
a{
	color:#dec5d9;
	text-decoration:none;
}

#container{
	background:url(pattern2.png);
	width:600px;
	margin:10px auto;
	border:1px solid #40474d;
		/* rounded corners */
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		/* background color transition */
		-webkit-transition: 1s;
		-moz-transition: 1s;
		transition: 1s;
		/* Shadow */
	    -moz-box-shadow: 1px 1px 1px #666;
	    -webkit-box-shadow: 1px 1px 1px #666;
	    box-shadow: 1px 1px 50px #666;		
}

	#container .header{
		text-align:center;
		color:#f4f4f4;
		padding:10px;
		border-bottom:2px dotted #ba93b2;
		font-family: 'Permanent Marker', arial, serif;
	}

	#container .content{
		font-family: 'Annie Use Your Telescope', arial, serif;
		text-align:justify;
		padding:20px;
		color:#cabdbd;
	}
	
	#container .content img{
		float:left;
		margin: 0 15px 5px 0;
		background:#f4f4f4;
		padding:3px;
	}
	
	#container .footer{
		text-align:center;
		border-top:1px dotted #ba93b2;
		padding:10px;
		color:#cabdbd;
		font-family: 'Permanent Marker', arial, serif;
	}
#gototutorial{font-family: 'Permanent Marker', arial, serif; position:fixed; bottom:0;}
#gototutorial a{padding:5px;color:#fff; background:#f20000;}
#gototutorial a:hover{color:#fff;background:#000}


	/* Penting untuk di perhatikan pada bagian dibawah ini*/
	#to-top {
		position: fixed;
		bottom: 50px;
		margin-left: 950px;
	}
	#to-top a {
		display: block;
		text-align: center;
		font: 11px/100% Arial, Helvetica, sans-serif;
		text-transform: uppercase;
		text-decoration: none;
		color: #bbb;
		/* background color transition */
		-webkit-transition: 1s;
		-moz-transition: 1s;
		transition: 1s;
	}
	#to-top a:hover {
		color: #f4f4f4;
	}
	
	#to-top span {
		width: 80px;
		height: 80px;
		display: block;
		margin-bottom: 7px;
		background: #ddd url(up.png) no-repeat center center;
		/* rounded corners - hanya optioanl saja*/
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
		/* background color transition hanya optioanl saja*/
		-webkit-transition: 1s;
		-moz-transition: 1s;
		transition: 1s;
	}
	#to-top a:hover span {
		background-color: #777;
	}
	/* End Penting*/	

Demo Download


Sekian…

Terima kasih telah membaca, maju terus web design Indonesia 😀

Komentar

comments

Izul Chaniago

Web Designer and Developer from Jakarta, Indonesia

grain storage instagram türk takipçi satın al