Hej! Zanim pójdziesz za daleko w dół króliczej nory z JavaScript opartej płynne przewijanie, wiem, że nie jest rodowitym cechą CSS na to: scroll-behavior.
html ( scroll-behavior: smooth; )A zanim sięgniesz po bibliotekę taką jak jQuery, aby pomóc, istnieje również natywna wersja płynnego przewijania w JavaScript, na przykład:
// 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 ma do tego polyfill. I prawdopodobnie sięgnąłbyś po to tylko wtedy, gdybyś robił coś z przewijaniem strony, czego nie można zrobić za pomocą #target jump links i CSS.
Dostępność płynnego przewijania
Niezależnie od technologii używanej do płynnego przewijania, dostępność jest problemem. Na przykład, jeśli klikniesz #hashłącze, natywnym zachowaniem przeglądarki jest zmiana fokusu na element pasujący do tego identyfikatora. Strona może się przewijać, ale przewijanie jest efektem ubocznym zmiany ostrości.
Jeśli zmienisz domyślne zachowanie zmiany ostrości (co musisz zrobić, aby zapobiec natychmiastowemu przewijaniu i włączyć płynne przewijanie), musisz samodzielnie poradzić sobie ze zmianą ostrości .
Heather Migliorisi napisała o tym, z rozwiązaniami kodu, w Smooth Scrolling and Accessibility.
Płynne przewijanie z jQuery
jQuery może to również zrobić. Oto kod umożliwiający płynne przewijanie strony do kotwicy na tej samej stronie. Ma wbudowaną logikę identyfikującą te łącza przeskoku, a nie kierującą do innych łączy.
// 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 ); )); ) ) ));Zobacz płynne przewijanie stron piórem w jQuery autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.
Jeśli użyłeś tego kodu i wszyscy lubicie HEJ CO Z NIEBIESKIM OBRAZEM?!, Przeczytaj powyższe rzeczy o dostępności.