Chào! Trước khi bạn đi quá xa xuống hang thỏ của di chuyển mượt mà dựa trên JavaScript, hãy biết rằng đó là một tính năng CSS bản địa cho việc này: scroll-behavior.
html ( scroll-behavior: smooth; )Và trước khi bạn tìm đến một thư viện như jQuery để trợ giúp, cũng có một phiên bản JavaScript gốc của khả năng cuộn mượt mà, như thế này:
// 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 có một polyfill cho việc này. Và bạn có thể chỉ đạt được điều này nếu bạn đang làm điều gì đó với việc cuộn trang mà không thể thực hiện được với các liên kết nhảy #target và CSS.
Khả năng tiếp cận của cuộn mượt mà
Dù bạn sử dụng công nghệ nào để cuộn mượt mà thì khả năng truy cập là một vấn đề cần quan tâm. Ví dụ: nếu bạn nhấp vào một #hashliên kết, hành vi gốc là để trình duyệt thay đổi tiêu điểm thành phần tử khớp với ID đó. Trang có thể cuộn, nhưng cuộn là tác dụng phụ của việc thay đổi tiêu điểm.
Nếu bạn ghi đè hành vi thay đổi tiêu điểm mặc định (mà bạn phải làm, để ngăn cuộn tức thì và cho phép cuộn trơn tru), bạn cần phải tự xử lý việc thay đổi tiêu điểm .
Heather Migliorisi đã viết về điều này, với các giải pháp mã, trong Khả năng di chuyển và Khả năng truy cập mượt mà.
Cuộn mượt với jQuery
jQuery cũng có thể làm điều này. Đây là mã để thực hiện cuộn trang mượt mà đến một liên kết trên cùng một trang. Nó có một số logic được xây dựng để xác định các liên kết nhảy đó và không nhắm mục tiêu các liên kết khác.
// 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 ); )); ) ) ));Xem Pen Smooth Page Scrolling trong jQuery của Chris Coyier (@chriscoyier) trên CodePen.
Nếu bạn đã sử dụng mã này và tất cả đều giống như ANH ẤY LÀ GÌ VỚI CÁC ĐẦU RA MÀU XANH?!, Hãy đọc nội dung về trợ năng ở trên.