Привет! Перед тем, как зайти слишком далеко вниз кролика отверстие 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 и 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» Криса Койера (@chriscoyier) на CodePen.
Если вы использовали этот код и все вам нравится: «ЭЙ, ЧТО С СИНИМИ КОНТРАКТАМИ?!», Прочтите информацию о доступности выше.