Smooth Scrolling ist eine moderne Mikroanimationsfunktion, die das Benutzererlebnis verbessert, indem sie eine einfache Navigation zwischen Abschnitten einer Seite ermöglicht. Anstatt sofort zu Abschnitten zu springen, sorgt das sanfte Scrollen für einen fließenden, ansprechenden Übergang. Es ist eine großartige Möglichkeit, Benutzer zu beschäftigen, ohne sie mit abrupten Sprüngen zu überfordern.

In diesem Artikel untersuchen wir zwei Möglichkeiten, reibungsloses Scrollen zu implementieren:

• CSS verwenden
• JavaScript verwenden

Lassen Sie uns zunächst in die Verwendung von CSS für reibungsloses Scrollen eintauchen.

Warum CSS für reibungsloses Scrollen?

CSS ist die einfachste und am meisten bevorzugte Methode, um reibungsloses Scrollen zu erreichen. Es ist effizient für die Seitenleistung, da kein zusätzliches JavaScript geladen wird, was es schneller und leichter macht. Lassen Sie uns fortfahren und dies in unserem Projekt umsetzen.

Schritt 1: Erstellen der Navigationsleiste

Erstellen wir zunächst eine einfache Navigationsleiste, die unsere Navigationslinks enthält. Über diese Links gelangen Benutzer zu bestimmten Abschnitten auf der Seite.

Stellen Sie sicher, dass es sich bei den Navigationslinks um Ankertags handelt, da diese es uns ermöglichen, problemlos zu bestimmten Abschnitten der Seite zu springen.

Schritt 2: Abschnitte erstellen
Nachdem wir nun unsere Navigationslinks haben, erstellen wir die entsprechenden Abschnitte.

Wir haben Abschnitte für jeden Navigationslink erstellt.

Schritt 3: Scrollbaren Inhalt hinzufügen
Damit das Scrollen reibungslos funktioniert, benötigt Ihre Seite genügend Inhalt zum Scrollen. Fügen wir etwas Dummy-Text hinzu, um die Seite scrollbar zu machen.

Endlich haben wir genug Inhalt, um unsere Seite scrollbar zu machen.

Schritt 4: Navigation mit Abschnitten verknüpfen
Wir verwenden das Attribut href des Ankertags, um auf die Abschnitte zu verweisen, zu denen wir scrollen möchten. Fügen Sie einfach ein # gefolgt von der entsprechenden Abschnitts-ID hinzu.

Was wir im obigen Bild also im Grunde tun, ist die Verwendung des href-Attributs, um auf den Abschnitt zu verweisen, zu dem unsere Navigationslinks führen sollen.

Schritt 5: Weisen Sie dem entsprechenden Abschnitt die entsprechende Kennung (ID) zu

Was wir jetzt getan haben, ist einfach jeden Link dem entsprechenden Abschnitt mit dem Attribut href und den IDs zuzuweisen. Daher würde ein Navigationslink mit einer href von #section-one mit einem Abschnitt von id section-one

Wenn wir nun auf den Navigationslink klicken, werden wir zum Abschnitt weitergeleitet.
Aber es gibt etwas, das uns aufgefallen ist: Es ist nicht flüssig, die Seite springt zu dem Abschnitt, was kein tolles Erlebnis ist.

Schritt 6: Smooth Scroll mit CSS hinzufügen
Um einen reibungslosen Bildlauf zu ermöglichen, fügen Sie dem HTML-Element eine einzelne CSS-Eigenschaft hinzu.

Wenn wir die scroll-behavior-Eigenschaft zu unserem HTML hinzufügen, können wir den reibungslosen Scrolleffekt beobachten, wenn auf unseren Navigationslink geklickt wird.

Wie es funktioniert

Unter der Haube wird das Attribut href im Anker-Tag traditionell für die Navigation zu externen Seiten oder URLs verwendet. In Kombination mit einem # gefolgt von einer Abschnitts-ID „schaut“ das Anker-Tag jedoch innerhalb der aktuellen Seite und scrollt zum entsprechenden Abschnitt. Durch Hinzufügen des Scroll-Verhaltens: glatt; Mit der CSS-Eigenschaft schaffen wir einen fließenden Übergang zwischen den Abschnitten und verbessern so das gesamte Benutzererlebnis.

Die andere Möglichkeit, reibungsloses Scrollen zu erreichen, besteht darin, JAVASCRIPT zu verwenden.
Auch das können wir in wenigen Schritten erreichen:

Hinweis: Jeder Abschnitt hätte weiterhin die zuvor zugewiesene ID.

Schritt 1: Erstellen Sie eine scrollIntoView-Funktion

Wir können eine Funktion in Javascript erstellen, die die scrollIntoView-Methode verwendet, um das gleiche Ergebnis zu erzielen. Etwa so:

Schritt 2: Funktion einbetten, wenn auf den Link geklickt wird

Wir werden die scrollIntoView-Funktion in den Ereignis-Listener einbetten, der an jeden Navigationslink angehängt ist. Auf diese Weise scrollt die Seite beim Klicken auf einen Link reibungslos zum Abschnitt, auf den verwiesen wird.

Dies kann je nach dem Framework, das Sie für die Entwicklung verwenden, auch umgestaltet werden.

Dies sind zwei einfache Möglichkeiten, wie wir beim Erstellen intuitiver Webseiten ein reibungsloses Scrollen erreichen können.

Hinterlassen Sie einen Kommentar, wenn Sie eine Frage oder ein Feedback haben.