Smooth Scroll - nach oben - fix positionieren und ganz oben ausblenden

  • Hier eine kleine Anleitung wie Ihr einen Nach Oben-Butten fix auf einer Seite positionieren könnt.
    Der Button wird erst ab einer bestimmten Scroll-Position eingeblendet bei click scrollt die Seite sanft nach oben. Zu sehen auf zella.de.


    Wir nutzen für das einbinden des Buttons und die Nach Oben-Funktion CSS.
    Für das ausblenden des Buttons sowie die Smooth Scroll-Funktion nutzen wir Javascript.
    Wenn der Nutzer also Javascript abgeschaltet hat funktioniert das ganze noch immer, eben halt ohne Smooth Scroll und ausblenden des Butten.


    Erweitert - Attribute - Standard - mobile_script


    3.fixed die Grafik ist fest positioniert, bei absolute würde die Grafik mit scrollen
    5. abstand von oben
    6. horizontal mittig zentriert
    7. Abstand von der Mitte
    9.+10. größe der Grafik
    12. URL der Grafik


    Nun binden wir den Butten ein und fügen das Javascript hinzu.
    Als letzten Absatz im Content, also direkt über der Fußzeile das Widget Quelltext mit folgendem Inhalt.


    8. wenn 400 Pixel nach unten gescrollt wurden wird der Butten eingeblendet
    17. Geschwindigkeit der Smooth Scroll-Funktion