Mit diesem nativen Smooth-Scrolling-Effekt können Sie die Verwendung Ihrer Links zur gleichen Seite etwas angenehmer gestalten.

Smooth Scrolling ist eine Technik, die in der Webentwicklung verwendet wird, um Benutzern ein flüssiges Scrollerlebnis zu bieten. Es verbessert die Navigation innerhalb einer Webseite, indem es die Scrollbewegung anstelle des standardmäßigen abrupten Sprungs animiert.

Dieser umfassende Leitfaden für Webentwickler hilft Ihnen bei der Implementierung eines reibungslosen Scrollens mithilfe von JavaScript.

Beim sanften Scrollen scrollt eine Webseite sanft zum gewünschten Abschnitt, anstatt sofort dorthin zu springen. Dies macht das Scrollen für den Benutzer angenehmer und reibungsloser.

Reibungsloses Scrollen kann das Benutzererlebnis einer Webseite auf verschiedene Weise verbessern:

  • Es erhöht die visuelle Attraktivität, indem es abrupte und störende Scroll-Sprünge eliminiert und so einen Hauch von Eleganz verleiht.
  • Es fördert die Benutzerinteraktion, indem es ein flüssiges und nahtloses Scroll-Erlebnis bietet. Dies wiederum motiviert die Benutzer, die Inhalte weiter zu erkunden.
    instagram viewer
  • Und schließlich erleichtert das reibungslose Scrollen den Benutzern die Navigation, insbesondere wenn sie lange Webseiten bearbeiten oder zwischen verschiedenen Abschnitten wechseln.

Um einen reibungslosen Bildlauf zu implementieren, können Sie das Standard-Bildlaufverhalten mithilfe von JavaScript ändern.

HTML-Struktur

Erstellen Sie zunächst die erforderlichen Markup-Elemente für die verschiedenen Ansichtsfenster und die Navigation, um zwischen ihnen zu scrollen.

html>
<htmllang="en">
<head>
 <metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="./style.css" />
<title>Smooth Scrolling Guide for Web Developerstitle>
head>


<body>
<nav>
<ul>
<li><ahref="#section1">Section 1a>li>
<li><ahref="#section2">Section 2a>li>
<li><ahref="#section3">Section 3a>li>
ul>
nav>


<sectionid="section1">
<h2>Section 1h2>
section>


<sectionid="section2">
<h2>Section 2h2>
section>


<sectionid="section3">
<h2>Section 3h2>
section>


<scriptsrc="./script.js">script>
body>
html>

Dieser HTML-Code besteht aus einer Navigationsleiste mit drei Ankertags. Das href-Attribut jedes Ankers gibt die eindeutige Kennung des Zielabschnitts an (z. B. Abschnitt1, Abschnitt2, Abschnitt3). Dadurch wird sichergestellt, dass jeder Link, auf den Sie klicken, zum entsprechenden Zielelement navigiert.

CSS-Styling

Wenden Sie als Nächstes etwas CSS an, um die Seite optisch ansprechend und organisiert zu gestalten. Fügen Sie Folgendes hinzu style.css:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "SegoeUI", Tahoma, Geneva, Verdana, sans-serif;
}


nav {
background: #fff;
box-shadow: 3px 3px 5pxrgba(0, 0, 0, 0.25);
position: sticky;
top: 0;
padding: 30px;
}


navul {
display: flex;
gap: 10px;
justify-content: center;
}


navulli {
list-style: none;
}


navullia {
border-radius: 5px;
border: 1.5pxsolid#909090;
text-decoration: none;
color: #333;
padding: 10px 20px;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

Dadurch werden die Links als eine Reihe von Schaltflächen und jeder Abschnitt als Element voller Höhe dargestellt. Beachten Sie jedoch, dass das Klicken auf einen Link dazu führt, dass der Browser ohne Animation sofort zum entsprechenden Abschnitt springt.

JavaScript-Implementierung

Um eine flüssige Animation hinzuzufügen, wenn Sie auf ein Ankertag klicken, verwenden Sie alternativ die Methode scrollIntoView(). Die scrollIntoView()-Methode ist eine integrierte JavaScript-Methode der Element-Klasse, mit der Sie ein Element in den sichtbaren Bereich des Browserfensters scrollen können.

Wenn Sie diese Methode aufrufen, passt der Browser die Bildlaufposition des Elementcontainers (z. B. des Fensters oder eines scrollbaren Containers) an, um das Element sichtbar zu machen.

Fügen Sie Ihren JavaScript-Code hinzu script.js Datei. Warten Sie zunächst, bis das DOMContentLoaded-Ereignis ausgelöst wird, bevor Sie etwas anderes tun. Dadurch wird sichergestellt, dass der Rückruf nur ausgeführt wird wenn das DOM vollständig geladen ist und ist bereit zu manipulieren.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

Als nächstes definieren Sie die makeLinksSmooth() Funktion. Wählen Sie zunächst die Ankertags in der Navigation aus, da Sie deren Verhalten ändern möchten. Anschließend durchlaufen Sie jeden Link und fügen einen Ereignis-Listener für sein Klickereignis hinzu.

functionmakeLinksSmooth() { 
const navLinks = document.querySelectorAll("nav a"); 
 navLinks.forEach((link) => {
 link.addEventListener("click", smoothScroll);
 });
}

Definieren Sie abschließend die SmoothScroll() Funktion, die ein Ereignis-Listener-Objekt akzeptiert. Rufen Sie „preventDefault()“ auf, um sicherzustellen, dass der Browser nicht seine Standardaktion ausführt, wenn Sie auf den Link klicken. Der folgende Code wird es ersetzen.

Erfassen Sie den href-Wert des aktuellen Ankertags und speichern Sie ihn in einer Variablen. Dieser Wert sollte die ID des Zielabschnitts mit dem Präfix „#“ sein, also verwenden Sie ihn, um das Element des Abschnitts über auszuwählen querySelector(). Wenn das targetElement vorhanden ist, führen Sie es aus scrollIntoView Methode und übergeben Sie das „sanfte“ Verhalten in einem Objektparameter, um den Effekt zu vervollständigen.

functionsmoothScroll(e) {
 e.preventDefault();
const targetId = this.getAttribute("href");
const targetElement = document.querySelector(targetId);
if (targetElement) { 
 targetElement.scrollIntoView({ behavior: "smooth", });
 }
}

Dadurch scrollt Ihre fertige Webseite reibungslos zu den einzelnen Abschnitten, wenn Sie auf einen Link klicken:

Um das reibungslose Scrollerlebnis noch weiter zu verbessern, können Sie bestimmte Aspekte verfeinern.

Sie können die vertikale Position der Schriftrolle mit anpassen Block Eigenschaft des Einstellungsarguments. Verwenden Sie Werte wie „Start“, „Mitte“ oder „Ende“, um den Teil des Zielelements zu identifizieren, zu dem gescrollt werden soll:

targetElement.scrollIntoView({ behavior: "smooth", block: "end" });

Lockerungseffekte hinzufügen

Wenden Sie Beschleunigungseffekte auf die Scroll-Animation an, um einen natürlicheren und optisch ansprechenderen Übergang zu erzielen. Erleichterungsfunktionen wie „Ease-In“, „Ease-Out“ oder „Benutzerdefiniert“. Kubisch-Bezier-Kurven kann die Beschleunigung und Verzögerung der Bildlaufbewegung steuern. Sie können eine benutzerdefinierte Timing-Funktion mit der CSS-Eigenschaft scroll-behavior oder eine JavaScript-Bibliothek wie „smooth-scroll“ verwenden, um das gleiche Ergebnis zu erzielen.

/* CSS to apply easing effect */
html {
scroll-behavior: smooth;
/* Custom cubic-bezier easing */
scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}

Stellen Sie sicher, dass Ihre reibungslose Scrolling-Implementierung in verschiedenen Browsern konsistent funktioniert. Testen und beheben Sie eventuell auftretende browserspezifische Besonderheiten oder Inkonsistenzen.

Sie können eine Website wie verwenden Kann ich benutzen um die Browserunterstützung beim Erstellen zu testen. Erwägen Sie die Verwendung einer JavaScript-Bibliothek oder eines Polyfills, um die browserübergreifende Kompatibilität sicherzustellen und allen Benutzern ein nahtloses Erlebnis zu bieten.

Sanftes Scrollen verleiht einen Hauch von Eleganz und verbessert das Benutzererlebnis, indem es einen flüssigen und optisch ansprechenden Scroll-Effekt erzeugt. Durch Befolgen der in diesem Leitfaden beschriebenen Schritte können Webentwickler mithilfe von JavaScript reibungsloses Scrollen implementieren.

Die Feinabstimmung des Scrollverhaltens, das Hinzufügen von Beschleunigungseffekten und die Sicherstellung der browserübergreifenden Kompatibilität werden dies tun Verbessern Sie das reibungslose Scrollen weiter und machen Sie Ihre Webseiten ansprechender und unterhaltsamer navigieren.