Jurnal Web .com

Cara membuat tombol scroll ke atas dengan jquery (back to top) – Sebuah website yang begitu panjang kebawah tentu akan menyulitkan penggunanya untuk bisa kembali lagi keatas, karena harus scroll terus dengan menggunakan mouse. Hal tersebut tentu kurang efektif.

Untuk mengatasi hal tersebut, banyak orang menggunakan sebuah tombol yang ketika di klik akan membawa kita ke bagian atas halaman website dengan animasi yang menarik.

Ilustrasi (Image: indexwp.com)

Dibutuhkan jquery untuk membuat hal semacam itu, dan pada tutorial kali ini jurnalweb akan mengajarkan Anda cara membuatnya. Mudah kok, script nya juga tidak panjang.

1. HTML: Buat sebuah file html dan tuliskan script markup nya seperti berikut ini

<div id="wrapper">
	<h1>Membuat Tombol Scroll to Top Dengan Jquery</h1>
	<h5><a href="http://www.jurnalweb.com/membuat-tombol-scroll-ke-atas-back-to-top-dengan-jquery">Baca tutorial di Jurnalweb.com</a></h5>

	Konten yang panjang disini....
	...
	...
	...
	Akhir konten
	<input type="button" value="Scroll Top" id="tombolScrollTop" onclick="scrolltotop()">
</div>

Yang perlu diperhatikan pada script diatas adalah tombol bertuliskan Scroll Top, dengan ID #tombolScrollTop dan disertai sebuah event onclick=”scrolltotop()”. Yang artinya ketika tombol tersebut diklik maka akan menjalankan fungsi scrolltotop().

2. Javascript: Sertakan script jquery berikut ini dibagian bawah, tepatnya sebelum tag [/body]

$(document).ready(function(){
	$(window).scroll(function(){
		if ($(window).scrollTop() > 100) {
			$('#tombolScrollTop').fadeIn();
		} else {
			$('#tombolScrollTop').fadeOut();
		}
	});
});

function scrolltotop()
{
	$('html, body').animate({scrollTop : 0},500);
}

Maksud script diatas adalah, ketika kita melakukan scroll kebawah sebanyak 100px, maka tombol Scroll Top akan ditampilkan, dan ketika tombol itu di klik maka akan memanggil fungsi scrolltotop(). Fungsi tersebut akan mengantarkan kita kembali ke 0px yang artinya berada di bagian paling atas halaman. Sedangkan angka 500 disitu adalah kecepatan animasi scroll nya. Semakin tinggi nilainya akan semakin lambat gerakannya.

3. CSS: Selanjutnya adalah mempercantik tampilan halaman dengan css dengan script sebagai berikut

body
{
	background-color:#F2F2F2;
	font-family:helvetica;
}
#wrapper
{
	text-align:center;
	margin:0px auto;
	padding:0px;
	width:760px;
}
#wrapper p{
	border: 1px solid #999;
	padding: 20px;
	margin: 20px;
	background: #fff;
}
#tombolScrollTop
{
	cursor: pointer;
	position:fixed;
	left:75%;
	bottom:50px;
	border:3px solid #585858;
	background-color:white;
	color:#585858;
	border-radius:100%;
	height:90px;
	width:90px;
	font-size:15px;
	display:none;
}

Yang perlu diperhatikan dari script diatas adalah pada ID #tombolScrollTop, dimana css tersebut berfungsi untuk menempatkan tombol pada posisi kanan bawah, yaitu 75% dari kiri (left:75%;) dan 50pixel dari bawah (bottom:50px;). Namun tombol tersebut hanya akan terlihat ketika sudah di scroll, jadi untuk awal tidak akan ditampilkan dulu, maka ditandai dengan (display:none;).

Demo & Download

Untuk Anda yang ingin mencoba demo dan mendownload script nya, silahkan klik DISINI.

Semoga membantu…

Artikel Lain:

10+ Website Untuk Belajar jQuery Cara Membuat Background Slideshow dengan Jquery Belajar jQuery untuk Pemula dalam 4 Langkah Mudah Kunci Konten Web Agar Tidak Bisa di Edit di Inspect Element / Developer Tool Cek Ketersediaan Data Username dengan AJAX jQuery PHP Cara Membuat Background Video Full-Screen dengan HTML5 & Jquery Cara Show Hide Password dengan Javascript Mencegah Submit Form Berulang Kali dengan Jquery & PHP Tutorial Cara Upload Foto dengan AJAX dan PHP (jQuery) Tutorial Cara Validasi Email dengan AJAX jQuery dan PHP Tips Menjadi Developer Javascript 9 Skill Utama yang Harus Dimiliki Front-End Developer