Hej! Než pôjdete príliš ďaleko do králičej diery JavaScript založené plynulé posúvanie, viem, že tam je natívny CSS vlastnosť pre toto: scroll-behavior.
html ( scroll-behavior: smooth; )A skôr ako pomôžete knižnici ako jQuery, existuje aj natívna verzia JavaScriptu pre plynulé posúvanie, napríklad táto:
// 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á na to polyfill. A pravdepodobne by ste po tom siahli, iba ak by ste robili niečo s posúvaním stránky, čo sa nepodarilo pomocou #target jump links a CSS.
Prístupnosť plynulého posúvania
Bez ohľadu na technológiu, ktorú používate na plynulé posúvanie, je prístupnosť problémom. Napríklad ak kliknete na #hashodkaz, natívnym správaním je, aby prehliadač zmenil zameranie na prvok zodpovedajúci danému ID. Stránka sa môže posúvať, ale rolovanie je vedľajším efektom zmeny zamerania.
Ak prepíšete predvolené správanie pri zmene zamerania (čo musíte urobiť, aby ste zabránili okamžitému posúvaniu a umožnili plynulé posúvanie), musíte so zmenou zamerania zaobchádzať sami .
Heather Migliorisi o tom napísala s kódovými riešeniami v časti Smooth Scrolling and Accessibility.
Hladké posúvanie pomocou jQuery
jQuery to tiež dokáže. Tu je kód na plynulé posúvanie stránky na ukotvenie na tej istej stránke. Má zabudovanú určitú logiku na identifikáciu týchto odkazových odkazov, a nie na zacielenie na iné 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 ); )); ) ) ));Pozrite si rolovanie plynulých stránok perom v jQuery od Chrisa Coyiera (@chriscoyier) na CodePen.
Ak ste použili tento kód a ste všetci ako Ahoj, čo je s modrými obrysmi?!, Prečítajte si vyššie uvedené informácie o prístupnosti.