FEHLERSUCHE bei einem nicht mitscrollenden "Nach-Oben" Button?

Mehrere Stunden hat es mich heute schon beschäftigt, ich komme und komme nicht darauf...

Es geht mir um den seitlichen (rechts) "skip-to-top" Button. Exakt alles habe ich genauso wie in diesem Pen Beispiel ( Link: https://codepen.io/jackherizsmith/pen/oNxVWrK ) gemacht.

Aber bei mir scrollt der Nach-Oben Button nicht mit wie in dem Pen Beispiel :

Meine Demo-Seite: http://misanthrop.bplaced.net/test/open-public/Testseite-V11b1__26-06-24.html (aktualisiert)

Allerdings habe ich mein position: relative nicht main mitgegeben sondern der id "skiptop". Mein Dev-Tool zeigt mir an, das jeweils relative und absolute richtig erkannt wird und es wird mir auch so gezeigt.

Nur halt die Klasse "scroll-top_link" scrollt nicht in dem Bereich hoch und runter wie es soll.

Was mache ich da falsch. Könnt ihr mir bei der Fehlersuche helfen?

Vieles habe ich ausprobiert, auch meinem main habe ich position relative gegeben, aber auch anderen Elementen setzte ich position relative allerdings ohne Effekt.

Das Ding ist allerdings das dieser seitliche Bereich ein eigenes grit-Element ist. Sprich:

.main-content-wrapper {
    display: grid;
    grid:     "main-head main-head" auto
            "navigations navigations" auto
            "main-content main-content" 1fr
            "main-footer main-footer" auto
          / minmax(0, auto) [main-nav-start] 5em [main-nav-end];
    }


#navigations {
    grid-area: navigations;    
    grid-column-end: main-nav;
}

#main-nav {
    grid-area: navigations / main-nav;
    position: relative;
    outline: thin solid red;
    margin: 0;
    padding: 0;
    z-index: 100;
}

Wo ich letztendlich das Hauptmenü anzeigen lasse, da habe ich noch keinen richtigen Plan.

Eventuell in der Zeile: #navigations und dann seitlich rechts.

Nicht zu verwechseln mit Seiten-Inhalt, das ist ein Seiten internes Sprungmenü zu einem bestimmten nach Datum geordneten Artikel. Bisher habe ich noch keine bessere Bezeichnung dafür gefunden. Irgendeine Idee dafür?

Zurück zum Hauptmenü, oder ich packe das Hauptmenü seitlich zum Nach-Oben Button, mache es ebenfalls sticky.

Was dann allerdings bei einem schmalen Browserfenster passiert?... Da habe ich eigentlich vor das Hauptmenü (oberhalb vom "Seiten-inhalt" Link) ohne Button (offen) untereinander anzuzeigen.

Sag mal bitte, da mir die Praxis fehlt, wie würdest Du es lösen?

Zurück zur eigentlichen Frage:

WICHTIG ist mir nun, warum der SCROLL-TOP Button nicht nach oben und unten mitscrollt wie er es eigentlich sollte.

Muss ich da was an der html-Struktur ändern. Ein zusätzliches div?

Ich habe da heute lange daran gesessen...

Answer 1

[Wolffe2]

Das Problem liegt bei deinem div.main-content-wrapper. Dieser darf kein overflow: hidden haben. Falls das overflow:hidden benötigt wird, kannst du dein nav#skiptop auch direkt in den body einfügen.

Im Body würde der nav dann so aussehen:

<h3 id="skip-top-label" class="visually-hidden">Skip-to-TOP</h3>
<nav style="position: absolute; top: 104vh; bottom: 1.6rem; right: 0; width: 140px; left: unset;" class="scroll-top-wrapper" aria-labelledby="skip-top-label" id="skiptop">
    <a class="scroll-top_link" href="#skip-to-top" style="position: sticky; top: 85vh;">
        <span>skip to top</span>
    </a>
</nav>

Damit das ganze funktioniert braucht der Body dann auch noch position:relativ

Woher ich das weiß: Hobby – Habe schon einige Webseiten programmiert

Comments

[Moni98799]

Zusatz 28-06 01h40: Habe jetzt bei der vorherigen Version (die von vorgestern) das overflow:hidden mal entfernt, wie Du es meintest, das das mein Problem auslöst. Ich weiß nicht mehr wozu ich das overflow:hidden gebraucht habe. Es könnte sein das ich verhindern wollte das das grid über mein body hinaustritt. Das war mal mein Problem. Das habe ich mit minmax(0, auto) und min-width: 0 bereits gelöst.

Aber zurück:

Es sieht jedenfalls so aus als wenn es funktioniert:

http://misanthrop.bplaced.net/test/open-public/Testseite-V11b1__26-06-24.html

Später werde ich testen wie es ausschaut wenn man die Schriftgröße bishin zu 500% erhöht. Ob dann noch alles stimmt- Könntest Du auch mal schauen ob ich etwas anpassen müsste? Und wenn ja, wie? DANKE Dir.

[Moni98799]

Hi, ja, es funktioniert zwar, aber leider nicht in dem Bereich wo es eigentlich sollte, aber ganz nah dran.

Life-Demosite: http://misanthrop.bplaced.net/test/open-public/Testseite-V11b1a__27-06-24.html

Das Prinzip ist allerdings wohl richtig nur muss das Ganze wohl einem noch übergeordneteren Container mitgegeben werden.

Danke Dir...

Answer 2

[MasterFAQ]

Stelle sicher, dass der Button korrekt positioniert ist und dass seine Positionierung relativ zu einem Container ist, der die gewünschte Scrollverhalten ermöglicht.

In deinem CSS sollte der Button so etwas wie das Folgende haben:

#skiptop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

Überprüfe, ob die HTML-Struktur korrekt ist und dass der Button sich nicht innerhalb eines Containers befindet, der seine Bewegung einschränkt.

<div id="skiptop" class="scroll-top_link">
    <a href="#">Nach Oben</a>
</div>

Stelle sicher, dass das JavaScript für das Scrollen korrekt funktioniert. Der "Nach-Oben" Button benötigt eine Funktion, die das Scrollen auslöst.

document.getElementById("skiptop").addEventListener("click", function(event) {
    event.preventDefault();
    window.scrollTo({top: 0, behavior: 'smooth'});
});

Da du CSS Grid verwendest, musst du sicherstellen, dass der Button nicht von der Grid-Layout-Struktur beeinflusst wird. Der Button sollte außerhalb des Grid-Layouts positioniert sein, damit er fixiert ist.

.main-content-wrapper {
    display: grid;
    grid-template-areas: 
        "main-head main-head"
        "navigations navigations"
        "main-content main-content"
        "main-footer main-footer";
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: minmax(0, auto) 5em;
}


#navigations {
    grid-area: navigations;    
    outline: thin solid red;
    margin: 0;
    padding: 0;
    z-index: 100;
}


#skiptop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

Ein zusätzliches

div

sollte nicht notwendig sein, wenn du den Button korrekt positioniert hast. Das

position: fixed

stellt sicher, dass der Button beim Scrollen an der gleichen Stelle bleibt.

Wenn diese Schritte das Problem nicht lösen, kannst du den Link zu deiner Testseite und das Codepen-Beispiel erneut überprüfen, um Unterschiede in der Implementierung zu finden. Achte besonders auf die Positionierungs- und Layout-CSS-Regeln!!!!

Answer 3

[Holzbiene2024]

Deine Beschreibung kann ich mit Firefox 127.0 nicht nachvollziehen.

Der Button scrollt mit und ist dann vom Bildschirm verschwunden.

Das macht keinen Sinn. Du musst ihn mit (CSS) position:fixed; festnageln.

~~~~~~

Im verlinkten Pen-Beispiel (unter Firefox) scrollt der Button NICHT mit. Das ist richtig, er soll ja unabhängig von der Scroll-Position zum Anfang der Seite leiten.

Dein Code hat 424 Zeilen, viel zu viel für die Fehlersuche, specke ihn auf das Wesentliche ab.

WICHTIG ist mir nun, warum der SCROLL-TOP Button nicht nach oben und unten mitscrollt wie er es eigentlich sollte.

Du hast das Prinzip dieses Buttons nicht verstanden. Der DARF NICHT mitscrollen, tut es aber.

Comments

[Moni98799]

NEIN, es geht NICHT um das PEN-Beispiel, DAS habe ich gefunden und wollte es auf meiner bplaced-webseite (auch oben verlinkt) anwenden. Bei meinen verschiedenen Browsern funktioniert das PEN-Beispiel WUNDERBAR, deshalb wollte ich es für mich abwandeln. NUR eben auf meiner bplaced-website funktioniert es NICHT mehr, obwohl ich alles so gemacht habe wie im Beispiel. Gemeint ist das setzen von relative und absolute und das sticky-machen vom a-LINK.

Was ich am PEN-Beispiel gut finde ist: Es gibt sozusagen eine Art wrapper in dem sich der Nach-Oben-Button scheinbar bewegt, aber er bleibt immer am unteren Rand stehen, es wirkt aber so das auf die Gesamtseite gesehen er mitscrollt und so immer verfügbar ist.

Achso, dieser Effekt tritt erst dann auf, wenn die eigentliche Browserhöhe verlassen wird und heruntergescrollt wird (nach ein wenig herunterscrollen halt!) , erst dann erscheint der NACH-OBEN-Button.

Diesen Effekt möchte ich haben, wenn nicht so wie im PEN-Beispiel dann muss hat das html etwas anders gedacht/gebaut werden.

Ich habe auch schon daran gedacht ein wrapper zu bauen, (innerhalb meiner #main-nav), der von ganz oben meiner #main-nav hinunter- reicht 100% + die Höhe vom Button zusammengerechnet hinunterreicht. Der Button ist somit ausserhalb des aktiven sichtbaren Browserfenster, bis dann etwas hinunterscrollt wird. Dieser wrapper wird dann sticky gemacht. Und wenn man nun die komplettseite hinunterscrollt scheint es so das dieser Bereich mit dem Button sich hoch und herunterbewegt, (das tut er ja eigentlich nicht, ich weiß) , aber der Button bleibt immer verfügbar und man kann betätigen.

Darum geht es mir. Jetzt verstanden?

Villeicht gibt es noch andere, die sich bei der Ideenfindung wie man soetwas löst, miteinmischen. Das wäre sehr nett.

[Moni98799]

@Moni98799

@Holzbiene2024 Schau mal hier auf der Seite, dort wird ein Prinzip beschrieben: https://dev.to/jackherizsmith/making-a-back-to-top-button-without-javascript-2ej6 UND schau dir dort mal das GIF - Beispiel an, Es ist genau DAS was ich anwenden wollte. Ansonsten, wenn es NICHT so funktioniert, muss man eben halt wie in meinem vorherigen Post beschrieben, es anders "anpacken".

[Moni98799]

Komisch, bei meinem Opera One (Version: 110.0.5130.82) / Firefox (127.0) / Edge (Version 126.0.2592.68) und Chrome passiert selbst nachdem ich das CACHE gelöscht habe NICHTS.

Jemand anderes der etwas dazu sagen könnte?