Sanftes Scrollen

Hey! Bevor du dich zu tief in das Kaninchenloch des JavaScript-basierten Smooth Scrolling begibst, solltest du wissen, dass es dafür eine native CSS-Funktion gibt: scroll-behavior.

html {
  scroll-behavior: smooth;
}

Und bevor du zu einer Bibliothek wie jQuery greifst, um dir zu helfen, gibt es auch eine native JavaScript-Version des Smooth Scrollings, wie diese

// 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 einen Polyfill dafür. Und du würdest wahrscheinlich nur darauf zurückgreifen, wenn du etwas mit dem Scrollen der Seite tun würdest, das nicht mit #target Jump-Links und CSS erledigt werden könnte.

Barrierefreiheit von Smooth Scrolling

Unabhängig davon, welche Technologie du für Smooth Scrolling verwendest, ist die Barrierefreiheit ein Thema. Wenn du zum Beispiel auf einen #hash-Link klickst, besteht das native Verhalten des Browsers darin, den Fokus auf das Element zu ändern, das dieser ID entspricht. Die Seite kann scrollen, aber das Scrollen ist ein Nebeneffekt der Fokusänderung.

Wenn du das Standardverhalten der Fokusänderung überschreibst (was du tun musst, um sofortiges Scrollen zu verhindern und sanftes Scrollen zu ermöglichen), musst du die Fokusänderung selbst übernehmen.

Heather Migliorisi schrieb darüber, mit Code-Lösungen, in Smooth Scrolling und Barrierefreiheit.

Sanftes Scrollen mit jQuery

jQuery kann dies auch tun. Hier ist der Code, um einen sanften Seiten-Scroll zu einem Anker auf derselben Seite durchzuführen. Er verfügt über eine integrierte Logik, um diese Jump-Links zu identifizieren und andere Links nicht anzusteuern.

// 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
          };
        });
      }
    }
  });

Wenn du diesen Code verwendet hast und dich fragst: HEY, WAS IST MIT DEN BLAUEN UMRISSEN?!, lies die Informationen zur Barrierefreiheit oben.

Sanftes Scrollen in React

James Quick hat ein schönes Schritt-für-Schritt-Tutorial zur Implementierung von Smooth Scrolling in React mit dem react-scroll-Plugin

<Link
  activeClass="active"
  to="section1"
  spy={true}
  smooth={true}
  offset={-70}
  duration={500}
>