Smooth Scrolling per CSS-Only generell aktivieren

Smooth Scrolling lässt sich per CSS-Only generell für alle internen Links automatisch aktivieren, um das Scrollen angenehmer wirken zu lassen.

a {-w-add-events:onclick=wScrollSmoothToTarget}

Um Smooth Scrolling generell zu aktivieren, genügt das obige CSS-Only Event für den a-Selektor. Bei Verweisen innerhalb einer Seite (z.B. Anker-Link als Sprungmarke zu einem anderen Bereich innerhalb der gleichen Seite) erfolgt somit ein sanfteres Scrollen zum Ziel-Element.

Die JavaScript-Funktion ist in der ui.js definiert, welche mit der BASE mitgeliefert wird und auch als ui.js-Weblic® verfügbar ist.

Smooth Scrolling ist in aktuellster BASE bereits standardmässig für Links aktiviert.
EDIT (Januar 2018): Auch in der BASE (Mobile First) ist dies bereits im Standard aktiviert.

Unter anderem haben Sie dadurch den Vorteil, daß bei fixiertem Kopfbereich auch bei Anker-Links innerhalb einer Seite sanft zum Ziel gescrollt wird und der fixierte Kopfbereich berücksichtigt wird.

Diese Webseite verwendet Cookies. Durch die Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Datenschutzinformationen