Pada siang cerah ini, saya akan memberikan sebuah tutorial lagi dimana untuk kali ini kita akan belajar cara menerapkan method jQuery scroll, jadi di jquery terdapat method yang namanya scroll, dari tulisannya saja kita sudah bisa membayangkan fungsi dari method ini, ya betul pasti berhubungan dengan sebuah scroll pada mouse tentunya, jadi method scroll ini kita akan apakan ketika kita scroll ada sesuatu apa ketika kita scroll seperti itu, dimana masih banyak juga yang masih bertanya maka dari itu jangan kemana-mana simak terus ya teman-teman.
Seperti judulnya yaitu cara menerapkan method jQuery scroll disini saya akan membuat sebuah menu dan saya membuat template one page dimana isinya satu website tersebut terdapat pada satu page, jadi home, profile, contact, ada dalam satu file, dimana teman-teman kita ingin melihat post yang lain tinggal scroll kebawah tentunya, tetapi karena one page dan kita tidak tahu sebanyak apa isi content dari setiap category menu, menyebabkan kita sedikit makan banyak waktu / kesulitan pada saat ingin melihat category menu lainya, jadi ketika saya ingin melihat category yang lain saya harus scroll kebawah, nah disini saya akan membantu masalah itu dengan method scroll kita bisa membantu menscroll ke category menu yang ingin kita tuju, keren bukan, caranya teman-teman silahkan coba, teman-teman bisa ikutin kode saya atau teman-teman lihat lalu coba teman-teman design sendiri ya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="bg-dark text-white">
<div class="container">
<div class="row mt-4">
<div class="col-md-8 offset-md-2">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Menu</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#product">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav> <!-- end nav -->
<h2 class="text-center mt-2">Cara Menerapkan Method jQuery Scroll</h2>
<div id="home" class="border-top mt-2">
<h3>Home</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ratione, porro repellendus possimus beatae magni, maiores libero omnis debitis a, ipsum qui aperiam. Facilis necessitatibus, cumque. Laudantium provident culpa molestiae?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur necessitatibus beatae impedit aspernatur esse ea facere inventore quod dolore, maxime, at minus, amet dolor! Impedit nisi, ad ullam aliquid ab.</p>
</div>
<div id="profile" class="border-top mt-2">
<h3>Profile</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ratione, porro repellendus possimus beatae magni, maiores libero omnis debitis a, ipsum qui aperiam. Facilis necessitatibus, cumque. Laudantium provident culpa molestiae?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur necessitatibus beatae impedit aspernatur esse ea facere inventore quod dolore, maxime, at minus, amet dolor! Impedit nisi, ad ullam aliquid ab.</p>
</div>
<div id="product" class="border-top mt-2">
<h3>Product</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ratione, porro repellendus possimus beatae magni, maiores libero omnis debitis a, ipsum qui aperiam. Facilis necessitatibus, cumque. Laudantium provident culpa molestiae?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur necessitatibus beatae impedit aspernatur esse ea facere inventore quod dolore, maxime, at minus, amet dolor! Impedit nisi, ad ullam aliquid ab.</p>
</div>
<div id="contact" class="border-top mt-2">
<h3>Contact</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ratione, porro repellendus possimus beatae magni, maiores libero omnis debitis a, ipsum qui aperiam. Facilis necessitatibus, cumque. Laudantium provident culpa molestiae?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur necessitatibus beatae impedit aspernatur esse ea facere inventore quod dolore, maxime, at minus, amet dolor! Impedit nisi, ad ullam aliquid ab.</p>
</div>
</div> <!-- end row-1 -->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
$('a[href^="#"]').on('click', function(e){
e.preventDefault()
var target = this.hash
var $target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top
}, 1000, 'swing');
})
})
</script>
</body>
</html>
yang perlu teman-teman perhatikan disini coba teman-teman lihat pada bagian proses jquerynya ya, ada kode seperti ini:
$('a[href^="#"]')
fungsi dari selector jquery di atas adalah untuk memanggil atau mengambil value yang terdapat pada ahref seperti itu lalu ada
var target = this.hash var $target = $(target);
this.has itu supaya kita mendapatkan id sesuai yang kita klik, dan kita buat $target lagi untuk kita rubah lagi menjadi object karena disini kita ingin mendapatkan proses offsetnya seperti itu, oke jika kita lihat di atas, silahkan teman-teman coba jika berhasil ketika teman-teman klik maka di akan tertuju pada category menu yang teman-teman ingin kan.
silahkan teman-teman pilih dan coba ketika teman-teman klik product maka tampilan akan bergeser kebawah dan menuju pada post productnya, kurang lebih seperti itu ya cara menerapkan method jQuery scroll semoga bermanfaat dan sampai jumpa pada tutorial berikutnya terimakasih.