Sanftes Scrollen bei internen Links konfigurieren

Veröffentlichungsdatum: 23. Januar 2018
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE

Beim internen Links lässt sich smooth scrolling einsetzen und das verhalten konfigurieren. Das Verhalten ist entweder für spezielle Link- bzw. Navigationselemente oder auch global über CSS-Only definierbar.

Global für alle Linkelemente eingestelltes Smooth Scrolling

.elementLink {  
 ...
  > a {    
    -w-add-data:'scrollingauto=yes,scrollsmoothtotargetduration=400';    
    -w-add-events:'onclick=wScrollSmoothToTarget'; 
    ...
  }
  ...
}

Über -w-add-events:'onclick=wScrollSmoothToTarget'; wird für Elemente des entsprechenden Selektors die Smooth Scrolling Funktion aktiviert. Weitere Einstellungen sind dann über -w-add-data möglich.

scrollingauto [yes|no]

Legt fest, ob beim Scrollen die Ereignisse genutzt werden sollen, was dazu führt, dass z.B. der Kopfbereich nach oben fährt. ist kein Wert angegeben, entspricht das 'yes'. Soll der Kopfbereich z.B. beim Klick entsprechen dem manuellen Scrollen animieren, muss der Wert auf 'no' stehen.

scrollsmoothtotargetduration [milliseconds]

Legt die Scroll-Dauer in Millisekunden fest. Ist nichts angegeben, beträgt sie 400 Millisekunden.