Хей! Преди да отидете твърде далеч надолу в заешката дупка на 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' ));Dustan Kasten има полифил за това. И вероятно бихте посегнали към това само ако правехте нещо с превъртането на страницата, което не можеше да се направи с връзки за прескачане на #target и CSS.
Достъпност на плавно превъртане
Каквато и технология да използвате за плавно превъртане, достъпността е проблем. Например, ако щракнете върху #hashвръзка, основното поведение е за браузъра да промени фокуса към елемента, съответстващ на този ID. Страницата може да превърта, но превъртането е страничен ефект от промяната на фокуса.
Ако замените поведението за промяна на фокуса по подразбиране (което трябва, за да предотвратите незабавно превъртане и да активирате плавно превъртане), трябва сами да се справите с промяната на фокуса .
Хедър Миглиориси пише за това, с кодови решения, в Гладко превъртане и достъпност.
Плавно превъртане с 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.
Ако сте използвали този код и всички сте като ХЕЙ КАКВО СЪС СИНИТЕ ОЧЕНИ?!, Прочетете нещата за достъпността по-горе.