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.

Smooth-Scrolling für verlinkte Container/Boxen

Wurde für eine Inhaltsbox oder -container ein Link definiert, wird der Link über die Funktion wOpenURL aufgerufen. Um das smooth-Scrolling für seiteninterne Anker zu aktivieren, geben Sie in der Konfigurationsmaske als Link nur den Anker (ohne Pfadangabe) an (z.B. #Ankertext).

Smooth Scrolling in Verbindung mit scroll-behavior

Es ist möglich, dass das Smooth Scrolling in Verbindung mit der CSS-Deklaration scroll-behaviour beim Aufruf von Hash-Tags zu unerwünschtem Scrollverhalten führt. Das liegt daran, dass der Browser das scroll-behaviour direkt ausführt und erst verzögert zusätzlich dann wScrollSmoothToTarget aufgerufen wird.

Beispiele um scroll-behaviour zu umgehen

/*1. Beispiel: scroll-behaviour via CSS deaktivieren 
  In der Seite wird zB via CSS-Quelltext-Element die CSS scroll-behaviour deaktiviert, hier für Links navigationMain
  Hinweis: Diese Version deaktiviert das scoll-behaviour für alle Links in der Seite
*/

#navigationMain {
  a[href^=#] {
    @at-root html {scroll-behaviour : unset !important;}
  }
}

/*2. Beispiel: Event für das a-Tag via JS abfangen
  Für die entsprechenden a-Tags wird das Event "onclick" in der desing.js abgefangen und dann individuell weitergeleitet.
  Hinweis: Diese Version deaktiviert das scoll-behaviour nur für die ausgewählten Links in der Seite
*/

jQuery("#navigationMain a[href^='#']").click(function(event){
  event.preventDefault();
  event.stopPropagation();
  //wScrollSmoothToElement(jQuery(jQuery(this).attr('href')));
  wScrollSmoothToTarget(jQuery(this));
});

Sollte für das Projekt grundsätzlich nur das scroll-behaviour gelten, genügt es das Event "-w-add-events" für die a-Tags zu deaktivieren/löschen. Bitte beachten Sie, dass das Positionieren von Ankern die Design-Angaben nicht mehr berücksichtigt und der angesteuerte Container unterhalb des Header-Bereiches liegen kann.