Гей! Перед тим, як зайти надто далеко вниз кролика отвір JavaScript на основі гладкою прокрутки, знайте , що є рідна особливість CSS для цього: scroll-behavior.
html ( scroll-behavior: smooth; )І перед тим, як звернутися до бібліотеки, такої як jQuery, щоб допомогти, існує також власна версія плавної прокрутки JavaScript, наприклад:
// 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' ));Дустан Кастен має для цього поліфіл. І ви, мабуть, дійшли б до цього лише якби робили щось із прокруткою сторінки, чого не можна було зробити за допомогою #target jump link та CSS.
Доступність плавної прокрутки
Яку б технологію ви не використовували для плавного прокручування, доступність викликає занепокоєння. Наприклад, якщо натиснути #hashпосилання, основна поведінка браузера має змінити фокус на елемент, що відповідає цьому ідентифікатору. Сторінка може прокручуватися, але прокрутка є побічним ефектом зміни фокусу.
Якщо ви перевизначаєте поведінку, що змінює фокус за замовчуванням (що потрібно, щоб запобігти миттєвій прокрутці та увімкнути плавну прокрутку), вам потрібно впоратися із зміною фокусу самостійно .
Хізер Мігліорісі писала про це, з рішеннями коду, у "Плавному прокручуванні та доступності".
Плавна прокрутка за допомогою jQuery
jQuery також може це зробити. Ось код для плавного прокручування сторінки до якоря на тій самій сторінці. Він має деяку логіку, вбудовану для ідентифікації цих перехідних посилань, а не для націлювання на інші посилання.
// 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 ); )); ) ) ));Дивіться прокручування сторінки згладжуванням у jQuery від Chris Coyier (@chriscoyier) на CodePen.
Якщо ви використовували цей код, і ви всі схожі на ГЕ, ЩО З СИНИМИ КОНТРОЛЯМИ!!, Прочитайте матеріали про доступність вище.