Smooth Scrolling per CSS-Only generell aktivieren

Navigation

Veröffentlichungsdatum: 09. Mai 2017
Änderungsdatum: 30. April 2024

weblication cms base css-only smooth scrolling wScrollSmoothToTarget wChangeScrollstatusOnAutoscrolling

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

Beispiel (Auszug aus der design.css): Smooth Scrolling für alle Links per CSS-Only aktivieren

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.

Smooth Scrolling und automatisches anpassen des Scrollstatus

Soll der Scrollstatus (html .scroll-top, html .scrolldirection-down, html .scrolldirection-up) beim Smooth Scrolling automatisch angepasst werden, kann das entweder

global in der design.js,
via -w-jQuery für eine CSS-Variante oder
innerhalb einer Seite über ein JS Quelltextelement

über die Variable wChangeScrollstatusOnAutoscrolling =yes aktiviert werden.

Das kann zum Beispiel dann notwendig sein, wenn in der Seite Inhalte über eine Bereichsnavigation angesteuert werden.

Auszug design.js


/*Diese Einstellung gilt global für das gesamte Projekt*/
wChangeScrollstatusOnAutoscrolling      = false; //Falls beim automatischen Scrollen der Scrollstatus angepasst werden soll

Auszug aus der elementNavigationSections.scss


/*@wCssFragment{class:elementNavigationSections;variant:30;caption:Vertikale Bereichsnavigation Knöpfe mit ausfahrenden Texte;caption-en:In page navigation vertically sliding texts;}*/
.elementNavigationSections_var30 {
  .....
  -w-add-jQuery:wChangeScrollstatusOnAutoscrolling=true;
}

Auszug aus einem Javascript-Quelltextelement


wChangeScrollstatusOnAutoscrolling=true;