Animasi Scroll to Top dengan Jquery

Template Landing Page untuk Blogspot

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:  17 Macam JavaScript Frameworks

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 😀

Tags

cara membuat web design dengan html,script web sederhana,animasi jquery,script animasi html,contoh script web sederhana,contoh halaman index,contoh index,contoh skrip web html,button pada php,contoh halaman indeks,contoh website yang menggunakan html,contoh jquery,contoh animasi jquery,script web design,animasi back,skrip desain web,cara membuat button pada php,contoh membuat desain html/ web sederhana,contoh koding ci sederhana,script website sederhana

Komentar

comments

Izul Chaniago

Web Designer and Developer from Jakarta, Indonesia

grain storage kocaeli escort