Smooth Scrolling per CSS-Only generell aktivieren

09. Mai 2017

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.

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.

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG