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...

HTML, Webseite, CSS, JavaScript, HTML5, Code, Webdesign, Webentwicklung, Visual Studio Code
Ist es möglich bei <details> & <summary> den Marker (zum Beispl. mit einem SVG) zu ändern?

Ich möchte bei <details> & <summary> den Marker , der ja momentan noch ein aufrechters Dreieck ist , mit einem eigenen SVG ändern. Einmal hätte ich die einzelnen SVG (bars-solid.svg & times-solid.svg) in einem Ordner auf dem Server, aber ich habe dort auch Font Awesome 5.

Folgendes habe ich ausprobiert, hat aber leider keinen Effekt:

details summary::-webkit-details-marker {
        background: url(../web-fonts/SVG/bars-solid.svg) center no-repeat;
        color: transparent;
        font-size: 2.1rem;
        font-weight: bold;
    }    

    details[open] summary::-webkit-details-marker,
    details[open] summary::marker {
      background: url(../web-fonts/SVG/times-solid.svg) center no-repeat;
        color: transparent;
        font-size: 2.1rem;
        font-weight: bold;
    }

Oder geht dies NUR mit einem ::after pseudo.element.

Könnt ihr mir es bitte mal zeigen?

<summary>Menü</summary>
   <ul>
       <li><a href="">Impressum &amp; rechtliches</a></li>
       <li><a href="">Website Erika Mustermann</a></li>
       <li><a href="">Blog Max Mustermann</a></li>
       <li><a href="">Blog Erika Mustermann</a></li>
   </ul>
</details>

Zusätzlich zu diesem Sandwich-Button würde ich in kleiner 
Schrift unter dem Botton dann noch Menü stehen haben.

Könnt ihr mir bitte helfen?

Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, Webdesign, Webentwicklung
Kann mir jemand bei der Erstellung eines ausklappbaren Seitenmenüs mit Hamburger-Button helfen?

Hoffentlich kann mir hier jemand weiterhelfen.

Ich möchte ein ausfahrbares Seitenmenü mit einem Hamburger-Button (Font Awesome) konstruieren.

Im unteren Bild sieht man meinen momentanen Stand. Ich möchte aber, das von seitlich rechts das Menü hineinschwebt.

Zur Zeit habe ich Folgendes:

<nav role="main-navigation" aria-label="site" id="main-navigate" class="main-navi">
  <button aria-expanded="undefined"></button>
  <ul id="navlinks">
    <li class="sub-menue">
      <a class="a-link" href="/test/public/Testseite2-2.html">Blog Max Mustermann</a>
      <button aria-expanded="undefined"></button>
      <div class="nav-group">
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 1-A</a>
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 1-B</a>
      </div>
    </li>
    <li class="sub-menue">
      <a class="a-link" href="/test/public/Testseite2-2.html">Blog Erika Mustermann</a>
      <button aria-expanded="undefined"></button>
      <div class="nav-group">
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 2-A</a>
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 2-B</a>
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 2-C</a>
      </div>
    </li>
    <li class="sub-menue">
      <a class="a-link" href="/test/public/Testseite2-2.html">Website Erika Mustermann</a>
      <button aria-expanded="undefined"></button>
      <div class="nav-group">
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 3-A</a>
      </div>
    </li>
    <li class="sub-menue">
      <a class="a-link" href="/test/public/Testseite2-2.html">Impressum / Datenschutz</a>
      <button aria-expanded="undefined"></button>
      <div class="nav-group">
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 4-A</a>
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 4-B</a>
      </div>
    </li>
  </ul>
</nav>

Da mein Post zu lang wird, hier ein Downloadlink des JS, CSS und HTML: LINK wieder gelöscht!

Könnte bitte jemand mir dabei helfen, dies zu entwickeln? Ein rudimentäres CodePen-Beispiel würde mir helfen.

Bild zum Beitrag
Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, Webdesign, Webentwicklung

Meistgelesene Beiträge zum Thema JavaScript