Hei! Sebelum Anda pergi terlalu jauh ke lubang kelinci bergulir mulus berbasis JavaScript, tahu bahwa ada fitur CSS asli untuk ini: scroll-behavior.
html ( scroll-behavior: smooth; )Dan sebelum Anda mencari pustaka seperti jQuery untuk membantu, ada juga versi JavaScript asli dari pengguliran halus, seperti ini:
// Scroll to specific values // scrollTo is the same window.scroll(( top: 2500, left: 0, behavior: 'smooth' )); // Scroll certain amounts from current position window.scrollBy(( top: 100, // could be negative value left: 0, behavior: 'smooth' )); // Scroll to a certain element document.querySelector('.hello').scrollIntoView(( behavior: 'smooth' ));Dustan Kasten memiliki polyfill untuk ini. Dan Anda mungkin hanya mencapai ini jika Anda melakukan sesuatu dengan menggulir halaman yang tidak dapat dilakukan dengan #target jump links dan CSS.
Aksesibilitas Pengguliran Halus
Teknologi apa pun yang Anda gunakan untuk pengguliran mulus, aksesibilitas menjadi perhatian. Misalnya, jika Anda mengklik #hashlink, perilaku aslinya adalah browser mengubah fokus ke elemen yang cocok dengan ID tersebut. Halaman mungkin bergulir, tetapi pengguliran adalah efek samping dari perubahan fokus.
Jika Anda menimpa perilaku perubahan fokus default (yang harus Anda lakukan, untuk mencegah pengguliran instan dan mengaktifkan pengguliran mulus), Anda perlu menangani sendiri pengubahan fokus tersebut .
Heather Migliorisi menulis tentang ini, dengan solusi kode, dalam Pengguliran Halus dan Aksesibilitas.
Gulir Halus dengan jQuery
jQuery juga bisa melakukan ini. Berikut kode untuk melakukan scroll halaman yang mulus ke jangkar di halaman yang sama. Ini memiliki beberapa logika yang dibangun untuk mengidentifikasi tautan lompat itu, dan tidak menargetkan tautan lain.
// Select all links with hashes $('a(href*="#")') // Remove links that don't actually link to anything .not('(href="#")') .not('(href="#0")') .click(function(event) ( // On-page links if ( location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname ) ( // Figure out element to scroll to var target = $(this.hash); target = target.length ? target : $('(name=' + this.hash.slice(1) + ')'); // Does a scroll target exist? if (target.length) ( // Only prevent default if animation is actually gonna happen event.preventDefault(); $('html, body').animate(( scrollTop: target.offset().top ), 1000, function() ( // Callback after animation // Must change focus! var $target = $(target); $target.focus(); if ($target.is(":focus")) ( // Checking if the target was focused return false; ) else ( $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable $target.focus(); // Set focus again ); )); ) ) ));Lihat Pengguliran Halaman Halus Pena di jQuery oleh Chris Coyier (@chriscoyier) di CodePen.
Jika Anda pernah menggunakan kode ini dan Anda semua menyukai HEY WHAT'S WITH THE BLUE OUTLINES?!, Baca hal-hal tentang aksesibilitas di atas.