Cara membuat efek smooth saat scrolling di html one page :
- Buat halaman html berupa navigation dan 3 div
- Buat menu sebanyak 3, lalu tiap menu kasih tag
<a href=”#scrol1″>Menu 1</a> - Tambahkan pada elemen div berupa id=”scrol1″
- Selesai
<!DOCTYPE html>
<html>
<head>
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
$(document).ready(function(){
// Add smooth scrolling to all links
$(“a”).on(‘click’, function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== “”) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery’s animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$(‘html, body’).animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
<style>
body, html, .main {
height: 100%;
}
section {
min-height: 100%;
}
</style>
</head>
<body>
<a href=”#section2″>Click Me to Smooth Scroll to Section 2 Below</a>
</body>
</html>
DEMO di : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll
