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>

// 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

// 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

body, html, .main {
height: 100%;

section {
min-height: 100%;

<a href=”#section2″>Click Me to Smooth Scroll to Section 2 Below</a>



DEMO di :

Leave a Reply

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