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

3 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet
Wolffe2
27.06.2024, 21:49

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
Moni98799 
Beitragsersteller
 28.06.2024, 01:55

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.
MasterFAQ
Nutzer, der sehr aktiv auf gutefrage ist
im Thema Code
30.06.2024, 01:49

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!!!!
Holzbiene2024
26.06.2024, 03:14

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.
Moni98799 
Beitragsersteller
 26.06.2024, 15:48

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 
Beitragsersteller
 26.06.2024, 03:21

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?