Хеј! Пре него што одете предалеко Довн тхе Раббит Холе од ЈаваСкрипт седиштем глатко померање, знам да је пореклом карактеристика ЦСС за ово: scroll-behavior.
html ( scroll-behavior: smooth; )И пре него што посегнете за библиотеком попут јКуери-а, постоји и изворна ЈаваСцрипт верзија глатког помицања, попут ове:
// 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' ));Дустан Кастен има полифил за ово. А за тим бисте вероватно посегнули само ако бисте радили нешто са помицањем странице, а што се није могло учинити помоћу #таргет јумп линкова и ЦСС-а.
Приступачност глатког помицања
Коју год технологију да користите за глатко помицање, приступачност је проблем. На пример, ако кликнете на #hashвезу, основно понашање ће прегледач променити фокус на елемент који одговара том ИД-у. Страница се може померати, али померање је споредни ефекат промене фокуса.
Ако замените подразумевано понашање промене фокуса (што морате, да бисте спречили тренутно помицање и омогућили глатко помицање), промјеном фокуса морате сами да се бавите .
О овоме је Хеатхер Миглиориси, са решењима кода, писала у Смоотх Сцроллинг анд Аццессибилити.
Глатко помицање помоћу јКуери-а
јКуери такође може то да уради. Ево кода за несметано помицање странице до сидра на истој страници. Има уграђену логику да идентификује те скочне везе, а не циља друге везе.
// 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 ); )); ) ) ));Погледајте Помичење странице глатком оловком у јКуери-у, Цхрис Цоииер (@цхрисцоииер) на ЦодеПен-у.
Ако сте користили овај код и сви сте попут ХЕЈ ШТА ЈЕ СА ПЛАВИМ ОБРАТИМА?!, Прочитајте горе о доступности.