Jadikan tautan halaman yang sama Anda sedikit lebih baik untuk digunakan dengan efek pengguliran halus asli ini.

Pengguliran halus adalah teknik yang digunakan dalam pengembangan web untuk menciptakan pengalaman pengguliran yang lancar bagi pengguna. Itu meningkatkan navigasi dalam halaman web dengan menganimasikan gerakan gulir alih-alih lompatan tiba-tiba default.

Panduan komprehensif untuk pengembang web ini akan membantu Anda menerapkan pengguliran yang lancar menggunakan JavaScript.

Pengguliran halus adalah saat laman web menggulir dengan lancar ke bagian yang diinginkan, alih-alih langsung melompat ke sana. Ini membuat pengalaman menggulir lebih menyenangkan dan mulus bagi pengguna.

Pengguliran yang mulus dapat meningkatkan pengalaman pengguna halaman web dengan beberapa cara:

  • Ini meningkatkan daya tarik visual dengan menghilangkan lompatan gulir yang tiba-tiba dan menggelegar, menambahkan sentuhan elegan.
  • Ini mendorong keterlibatan pengguna dengan memberikan pengalaman pengguliran yang lancar dan mulus. Ini, pada gilirannya, memotivasi pengguna untuk menjelajahi konten lebih jauh.
    instagram viewer
  • Terakhir, pengguliran yang mulus membuat navigasi lebih mudah bagi pengguna, terutama saat berhadapan dengan halaman web yang panjang atau berpindah antar bagian yang berbeda.

Untuk menerapkan pengguliran yang mulus, Anda dapat mengubah perilaku pengguliran default menggunakan JavaScript.

Struktur HTML

Pertama, buat elemen markup yang diperlukan untuk area pandang yang berbeda dan navigasi untuk menggulir di antaranya.

html>
<htmllang="en">
<head>
 <metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="./style.css" />
<title>Smooth Scrolling Guide for Web Developerstitle>
head>


<body>
<nav>
<ul>
<li><ahref="#section1">Section 1a>li>
<li><ahref="#section2">Section 2a>li>
<li><ahref="#section3">Section 3a>li>
ul>
nav>


<sectionid="section1">
<h2>Section 1h2>
section>


<sectionid="section2">
<h2>Section 2h2>
section>


<sectionid="section3">
<h2>Section 3h2>
section>


<scriptsrc="./script.js">script>
body>
html>

HTML ini terdiri dari bilah navigasi yang memuat tiga tag jangkar. Atribut href dari setiap jangkar menentukan pengenal unik bagian target (mis. bagian1, bagian2, bagian3). Ini memastikan bahwa setiap tautan yang Anda klik menavigasi ke elemen target yang sesuai.

Gaya CSS

Selanjutnya, terapkan beberapa CSS untuk membuat halaman terlihat menarik dan teratur. Tambahkan berikut ini ke style.css:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "SegoeUI", Tahoma, Geneva, Verdana, sans-serif;
}


nav {
background: #fff;
box-shadow: 3px 3px 5pxrgba(0, 0, 0, 0.25);
position: sticky;
top: 0;
padding: 30px;
}


navul {
display: flex;
gap: 10px;
justify-content: center;
}


navulli {
list-style: none;
}


navullia {
border-radius: 5px;
border: 1.5pxsolid#909090;
text-decoration: none;
color: #333;
padding: 10px 20px;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

Ini akan merender tautan sebagai deretan tombol dan setiap bagian sebagai elemen tinggi penuh. Namun perhatikan bagaimana mengeklik tautan menyebabkan browser langsung melompat ke bagian yang sesuai, tanpa animasi.

Implementasi JavaScript

Selain itu untuk menambahkan animasi yang halus saat Anda mengklik tag jangkar, gunakan metode scrollIntoView(). Metode scrollIntoView() adalah a metode JavaScript bawaan dari kelas Elemen yang memungkinkan Anda menggulir elemen ke area yang terlihat di jendela browser.

Saat Anda memanggil metode ini, browser menyesuaikan posisi gulir wadah elemen (seperti jendela atau wadah yang dapat digulir) untuk membuat elemen terlihat.

Tambahkan kode JavaScript Anda ke script.js mengajukan. Mulailah dengan mendengarkan event DOMContentLoaded untuk diaktifkan sebelum melakukan hal lain. Ini memastikan panggilan balik hanya berjalan saat DOM terisi penuh dan siap untuk dimanipulasi.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Selanjutnya, tentukan makeLinksSmooth() fungsi. Mulailah dengan memilih tag jangkar di navigasi, karena Anda ingin mengubah perilakunya. Kemudian, ulangi setiap tautan, dan tambahkan pendengar acara untuk acara kliknya.

functionmakeLinksSmooth() { 
const navLinks = document.querySelectorAll("nav a"); 
 navLinks.forEach((link) => {
 link.addEventListener("click", smoothScroll);
 });
}

Akhirnya, tentukan smoothScroll() fungsi yang mengambil objek pendengar acara. Panggil preventDefault() untuk memastikan browser tidak melakukan tindakan defaultnya saat Anda mengeklik tautan. Kode berikut akan menggantikannya.

Raih nilai href dari tag jangkar saat ini dan simpan dalam variabel. Nilai tersebut harus berupa ID bagian target, dengan awalan "#", jadi gunakan untuk memilih elemen bagian melalui querySelector(). Jika targetElement ada, jalankan scrollIntoView metode dan meneruskan perilaku "halus" dalam parameter objek untuk menyelesaikan efeknya.

functionsmoothScroll(e) {
 e.preventDefault();
const targetId = this.getAttribute("href");
const targetElement = document.querySelector(targetId);
if (targetElement) { 
 targetElement.scrollIntoView({ behavior: "smooth", });
 }
}

Dengan itu, halaman web Anda yang sudah selesai akan bergulir dengan lancar ke setiap bagian saat Anda mengklik tautan:

Untuk lebih meningkatkan pengalaman pengguliran yang mulus, Anda dapat menyempurnakan aspek-aspek tertentu.

Anda dapat menyesuaikan posisi vertikal gulungan menggunakan memblokir properti dari argumen pengaturan. Gunakan nilai seperti "mulai", "tengah", atau "akhir" untuk mengidentifikasi bagian elemen target yang akan digulir ke:

targetElement.scrollIntoView({ behavior: "smooth", block: "end" });

Menambahkan Efek Pelonggaran

Terapkan efek easing ke animasi gulir untuk membuat transisi yang lebih alami dan menarik secara visual. Fungsi easing seperti ease-in, ease-out, atau custom kurva kubik-bezier dapat mengontrol akselerasi dan deselerasi gerakan gulir. Anda dapat menggunakan fungsi pengaturan waktu khusus dengan properti CSS scroll-behavior atau library JavaScript seperti "smooth-scroll" untuk mencapai hasil yang sama.

/* CSS to apply easing effect */
html {
scroll-behavior: smooth;
/* Custom cubic-bezier easing */
scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}

Pastikan penerapan smooth scrolling Anda bekerja secara konsisten di berbagai browser. Menguji dan menangani keanehan atau ketidakkonsistenan khusus browser apa pun yang mungkin timbul.

Anda dapat menggunakan situs web seperti Dapatkah saya menggunakan untuk menguji dukungan browser saat membangun. Pertimbangkan untuk menggunakan library JavaScript atau polyfill untuk memastikan kompatibilitas lintas-browser dan memberikan pengalaman yang mulus untuk semua pengguna.

Pengguliran yang halus menambahkan sentuhan keanggunan dan meningkatkan pengalaman pengguna dengan menciptakan efek pengguliran yang mengalir dan menyenangkan secara visual. Dengan mengikuti langkah-langkah yang diuraikan dalam panduan ini, pengembang web dapat menerapkan pengguliran halus menggunakan JavaScript.

Menyempurnakan perilaku pengguliran, menambahkan efek pelonggaran, dan memastikan kompatibilitas lintas-browser semakin meningkatkan pengalaman pengguliran yang mulus, membuat halaman web Anda lebih menarik dan menyenangkan navigasi.