Membuat Back to Top dengan jQuery

alfa6661
- December 09, 2015
0 (0 votes)
Rate :
Cara Membuat tombol Back to Top / Scroll to Top dengan menggunakan jQuery

Membuat pengunjung betah di halaman website anda sangat penting untuk menjaga pengunjung agar tetap berada pada halaman anda. Salah satu cara untuk membuat pengunjung betah adalah membuat halaman website yang mudah digunakan (user friendly), jika website anda sulit untuk digunakan akan membuat pengunjung tidak nyaman dan segera meninggalkan website anda.

Untuk website yang memiliki banyak informasi pada halaman sehingga memerlukan scroll yang jauh dibawah halaman akan sangat mengganggu jika pengunjung ingin kembali ke atas halaman untuk mengklik link / menu yang ada. Untuk mengatasi masalah ini kita memerlukan sesuatu untuk membuatnya mudah ketika pengunjung perlu kembali ke atas halaman, hal ini bisa dilakukan dengan menambahkan link / tombol untuk kembali ke atas halaman.

Sering kita melihat beberapa website dengan tombol "Back to Top" di bagian bawah website yang fungsinya adalah untuk mengembalikan ke bagian atas. Pada tutorial kali ini kita akan membuat tombol "Back to Top" ini dengan menggunakan jQuery.

Syntax

Button

Pertama-tama mari kita buat tombol / link untuk mentrigger fungsi "Back to Top" yang akan kita buat.

<a href="#" class="toTop">Back To Top</a>

CSS

Selanjutnya tambahkan sedikit CSS agar posisi tombol / link berada di kanan bawah halaman. Sisanya silahkan ditambahkan sesuai dengan keinginan.

.toTop {
	position:fixed;
	bottom:30px;
	right:40px;
	display:none;
}

jQuery

Selanjutnya tambahkan kode jQuery untuk menampilkan link ketika pengunjung tidak berada diatas halaman dan menambahkan fungsi untuk kembali ke atas ketika link di klik.

$(document).ready(function(){	
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('.toTop').fadeIn();
		} else {
			$('.toTop').fadeOut();
		}
	});
	$('.toTop').click(function(){
		$('html, body').animate({scrollTop : 0},800);
		return false;
	});
});

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter

– Eric S. Raymond

Have a better explanation?

If you have comments about this post. Please write your comments below

No comments associated with this article