Hallo! Bevor Sie zu weit in das Kaninchenloch des JavaScript-basierten reibungslosen Bildlaufs vordringen, sollten Sie wissen, dass es dafür eine native CSS-Funktion gibt : scroll-behavior.
html ( scroll-behavior: smooth; )Und bevor Sie nach einer Bibliothek wie jQuery greifen, um zu helfen, gibt es auch eine native JavaScript-Version des reibungslosen Bildlaufs:
// 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 hat dafür eine Polyfüllung. Und Sie würden wahrscheinlich nur danach greifen, wenn Sie etwas mit dem Scrollen der Seite tun würden, was mit #target-Sprunglinks und CSS nicht möglich wäre.
Zugänglichkeit des reibungslosen Bildlaufs
Unabhängig davon, welche Technologie Sie für ein reibungsloses Scrollen verwenden, ist die Barrierefreiheit ein Problem. Wenn Sie beispielsweise auf einen #hashLink klicken , ändert das native Verhalten des Browsers den Fokus auf das Element, das dieser ID entspricht. Die Seite wird möglicherweise gescrollt, aber das Scrollen ist ein Nebeneffekt der Fokusänderung.
Wenn Sie das Standardverhalten zum Ändern des Fokus überschreiben (das Sie ausführen müssen, um ein sofortiges Scrollen zu verhindern und ein reibungsloses Scrollen zu ermöglichen), müssen Sie das Ändern des Fokus selbst vornehmen .
Heather Migliorisi schrieb darüber mit Codelösungen in Smooth Scrolling and Accessibility.
Reibungsloser Bildlauf mit jQuery
jQuery kann dies auch. Hier ist der Code, mit dem Sie einen reibungslosen Bildlauf zu einem Anker auf derselben Seite durchführen können. Es ist eine Logik eingebaut, um diese Sprungverbindungen zu identifizieren und nicht auf andere Verbindungen abzuzielen.
// 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 ); )); ) ) ));Siehe das Scrollen der Pen Smooth-Seite in jQuery von Chris Coyier (@chriscoyier) auf CodePen.
Wenn Sie diesen Code verwendet haben und alle wie HEY WHAT'S WITH THE BLUE OUTLINES?! Sind, lesen Sie die Informationen zur Barrierefreiheit oben.