top-link

[kubjo]

Hi Leute,
ich würde gern einen mitscrollenden Top-Link einbauen. Leider sind die Erweiterungen aus älteren Threads für 4.10.xx nicht mehr aktuell. Kann mir jemand einen Tipp geben, wie man sowas elegant realisiert? Ich würde eine Lösung ohne JS bevorzugen, das geht doch sicherlich auch nur mit CSS, oder?

Grüße
Jochen

[mlweb]

Mit position: fixed zum Beispiel sollte das gehen.

[mokaki]

Versuch es doch mal mit: mindbird/contao-uitotop

funktioniert bei mir mit 4.10.2 und php 7.4.9 ausgezeichnet.

[fusch]

Hallo Jochen,

da braucht es auch wirklich keine Extension dafür. Hier ist eine Lösung beschrieben mit Codepen-Beispiel zum Nachvollziehen:
https://moderncss.dev/pure-css-smoot...l-back-to-top/

In kurz:

1. Modul "eigenes HTML" anlegen mit diesem Inhalt, in Seitenlayout einfügen am Ende Deiner Seite:

  <div class="back-to-top-wrapper">
    <a href="#top" class="back-to-top-link" aria-label="Scroll to Top">????</a>
  </div>

2. CSS

.back-to-top-link {

   display: inline-block;
  text-decoration: none;
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: #D6E3F0;
  // emoji don't behave like regular fonts
  // so this helped position it correctly
  padding: 0.25rem;
  // `fixed` is fallback when `sticky` not supported
  position: fixed;
  // preferred positioning, requires prefixing for most support, and not supported on Safari
  // @link https://caniuse.com/#search=position%3A%20sticky
  position: sticky;
  // reinstate clicks
  pointer-events: all;
  // achieves desired positioning within the viewport
  // relative to the top of the viewport once `sticky` takes over, or always if `fixed` fallback is used
  top: calc(100vh - 5rem);
}

Wenn Du magst, kannst Du noch die Sache mit dem Smooth Scrolling ergänzen (s. Link).

LG
Hella

[kubjo]

Hallo fusch,
vielen Dank für die Lösung!
Allerdings springt die Seite immer zur Startseite nicht auf die gleiche Seite nach oben.

Auch das mit dem "position:sticky" funktioniert nicht so richtig, was muss denn gegeben sein, dass das funktioniert?

Grüße
Jochen

[derRenner]

Auch das mit dem "position:sticky" funktioniert nicht so richtig, was muss denn gegeben sein, dass das funktioniert?

Was genau funktioniert nicht so richtig? Wie ist das Verhalten? Hast du einen Link zur Seite?
ggf. brauchst du noch ein 'position:relative' in einem übergeordneten DIV

Allerdings springt die Seite immer zur Startseite nicht auf die gleiche Seite nach oben.

Wie sieht denn dein href aus?

[kubjo]

Hi der Renner,
hier ein link zur Seite

Grüße
Jochen

[derRenner]

ändere mal href aus:

<a href="{{env::request}}#top" .... 

[derRenner]

Ich würde den To-Top-Link zum Beispiel im Footer platzieren - mach dazu ein Modul mit 'Eigenem HTML' ... das hat den Vorteil, dass du's im Seitenlayout hin und her platzieren kannst.
dann ergänze dein CSS hiermit - ggf. ist 'sticky' Browserabhängig - ich würde hier mit 'fixed' arbeiten

.back-to-top-wrapper {
    position: fixed;
}