Cara membuat efek halus saat scrolling (smooth scrolling efek) dengan jquery

Cara membuat efek smooth saat scrolling di html one page :

  1. Buat halaman html berupa navigation dan 3 div
  2. Buat menu sebanyak 3, lalu tiap menu kasih tag
    <a href=”#scrol1″>Menu 1</a>
  3. Tambahkan pada elemen div berupa id=”scrol1″
  4. 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

Leave a Reply

Your email address will not be published. Required fields are marked *