Ahoj! Než půjdete příliš daleko do králičí díry JavaScript založené plynulé posouvání, vím, že tam je nativní CSS vlastnost pro toto: scroll-behavior.
html ( scroll-behavior: smooth; )A než se dostanete ke knihovně jako jQuery, která vám pomůže, existuje také nativní verze JavaScriptu plynulého posouvání, jako je tato:
// 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 má k tomu polyfill. A pravděpodobně byste po tom sáhli jen tehdy, pokud byste s posouváním stránky dělali něco, co by nebylo možné pomocí odkazů #target jump a CSS.
Přístupnost plynulého posouvání
Bez ohledu na technologii, kterou používáte pro plynulé posouvání, je dostupnost problémem. Například pokud kliknete na #hashodkaz, nativním chováním je, aby prohlížeč změnil fokus na prvek odpovídající tomuto ID. Stránka se může posouvat, ale posouvání je vedlejším efektem změny zaměření.
Pokud přepíšete výchozí chování při změně zaostření (které musíte, abyste zabránili okamžitému posouvání a umožnili plynulé posouvání), musíte se změnou zaostření zabývat sami .
Heather Migliorisi o tom psala s kódovými řešeními v Smooth Scrolling and Accessibility.
Hladké posouvání pomocí jQuery
jQuery to také dokáže. Zde je kód, který umožňuje plynulé posouvání stránky na kotvu na stejné stránce. Má nějakou logiku zabudovanou k identifikaci těchto odkazů na odkazy a ne na jiné odkazy.
// 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 ); )); ) ) ));Podívejte se na posouvání stránky perem v jQuery od Chrisa Coyiera (@chriscoyier) na CodePen.
Pokud jste použili tento kód a jste všichni jako HEJ, CO JE S MODRÝMI OBVODY?!, Přečtěte si výše uvedené informace o přístupnosti.