Cara Membuat Jquery scrollTo pada website

Pada kesempatan kali ini saya akan membahas tentang jquery scrollTo, seperti yang saya bahas sebelum – sebelumnya bahwa jquery sangat banyak sekali fungsi – fungsinya. Belajar bahasa pemrograman jquery kita harus dituntut kreatif, kenapa begitu, yah karena ketika kita sudah memahami konsepnya maka akan mudah menerapkan fungsi – fungsi event jquery. Tergantung daya kreatifitas atau imajenasi kita mau mengngembanginnya bagaimana.

Jquery scrollTo adalah fungsi jquery yang sering di gunakan untuk membuat event scroll, seperti halnya ketika kita punya website dan user masuk ke halaman website kita ketika user berada pada halaman bawah website kita maka user disediakan tombol klik untuk balik kehalaman atas secara otomatis, tanpa perlu menscroll halaman website kita. Seperti halnya kita memakai plugin jquery back to top. Oke cukup menarik bukan, tentu sangat memudahkan pengunjung website kita, ketika halaman website kita banyak dan panjang – panjang maka pengunjung website kita untuk kehalaman atas tidak perlu menscroll halaman website kita, cukup meng-klik tombol scroll sudah balik keatas.

Oke seperti biasa langsung saja saya praktikkan, untuk teman – teman Â silahkan ikuti contoh di baawah ini;

<!DOCTYPE html>
<html>
<head>
	<title> double click </title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

	<style type="text/css">
		*{padding:0; margin:0;}
		header{height: 1000px; text-align:center;}
		h1{padding:50px 0; background:green;}
		h2{float: right;}
		img {width: 50px;}
	</style>
</head>
<body>
	<header>
		<h1>Judul paragraf atas</h1>
		
	</header>

	<h2><img src="../img/panah.png"></h2>
	
	<script type="text/javascript">
		function dblclick(){
			window.scrollTo(0,0)
		}
		if (document.layers) {
			document.captureEvents(Event.ONDBLCLICK);
		}
		document.ondblclick=dblclick;
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title> double click </title>

*{padding:0; margin:0;}

header{height: 1000px; text-align:center;}

h1{padding:50px 0; background:green;}

h2{float: right;}

img {width: 50px;}

</style>

</head>

<body>

<h1>Judul paragraf atas</h1>

</header>

function dblclick(){

window.scrollTo(0,0)

}

if (document.layers) {

document.captureEvents(Event.ONDBLCLICK);

}

document.ondblclick=dblclick;

</script>

</body>

</html>

Oke dari contoh script di atas Â saya memberikan gambaran ketika user masuk pada bagian bawah website, maka user tidak perlu menscroll halaman website untuk kembali Â ke atas tinggal klik image yang berada di tag h2. maka sih user akan berada pada halaman atas kembali atau pada bagian header. Untuk lebih jelasnya silahkan teman – teman pratikkan sendiri.

Facebook DUMET School

Categories