Hey! Sebelum anda pergi terlalu jauh ke dalam lubang arnab untuk menatal lancar berasaskan JavaScript, tahu bahawa terdapat satu ciri CSS asli untuk ini: scroll-behavior.
html ( scroll-behavior: smooth; )Dan sebelum anda menjumpai perpustakaan seperti jQuery untuk membantu, terdapat juga versi JavaScript asli untuk pengguliran lancar, 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 mempunyai polyfill untuk ini. Dan anda mungkin hanya akan mencapainya jika anda melakukan sesuatu dengan menatal halaman yang tidak dapat dilakukan dengan pautan lompat #target dan CSS.
Kebolehcapaian Smrolling yang lancar
Apa sahaja teknologi yang anda gunakan untuk menatal dengan lancar, kebolehcapaian menjadi perhatian. Contohnya, jika anda mengklik #hashpautan, tingkah laku asli adalah untuk penyemak imbas menukar fokus kepada elemen yang sepadan dengan ID tersebut. Halaman mungkin menatal, tetapi menatal adalah kesan sampingan dari fokus yang berubah.
Sekiranya anda mengatasi tingkah laku perubahan fokus lalai (yang harus anda lakukan, untuk mengelakkan pengguliran segera dan membolehkan pengguliran lancar), anda perlu menangani sendiri perubahan fokus .
Heather Migliorisi menulis tentang ini, dengan penyelesaian kod, dalam Smooth Scrolling and Accessibility.
Tatal lancar dengan jQuery
jQuery juga boleh melakukan ini. Inilah kod untuk melakukan tatal halaman yang lancar ke sauh di halaman yang sama. Ini mempunyai beberapa logik yang dibina untuk mengenal pasti pautan lompat tersebut, dan tidak menyasarkan pautan 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 Pen Halaman Halaman lancar di jQuery oleh Chris Coyier (@chriscoyier) di CodePen.
Sekiranya anda telah menggunakan kod ini dan anda semua seperti HEY APA DENGAN OUTLINES BIRU?!, Baca perkara mengenai kebolehcapaian di atas.