smoothes scrollen mit bootstrap funktioniert nicht

[Gunnar Bittersmann]

@@FrankMe

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>                        
            </button>
…
<div class="collapse navbar-collapse navbar-right" id="myNavbar" >...

Das ist nicht die Naviagtion. Das ist ein Button. Und zwar ein unsinniger:

• Was sollen die 3 spans? Ein Hamburger-Icon zeichen? Ernsthaft? Zum Zeichnen von Icons gibt es SVG. Als Hamburger-Icon können auch die Zeichen ≡ U+2261 IDENTICAL TO oder ☰ U+2630 TRIGRAM FOR HEAVEN herhalten.

• Der Button hat keinerlei Beschriftung. Muss er aber haben. Wie sollen sonst Nutzer, die den Seiteninhalt nicht visuell erfassen, erfahren, was der Button bewirken soll?verstanden wird.

Denkbar wäre sowas:

<button>
	<span aria-hidden="true">☰</span>
	<span class="visually-hidden">Menü</span>
</button>

Die Beschriftung darf nur visuell versteckt werden. CSS dazu in How-to: Hide Content

Experten raten aber davon ab, weil (je nach Zielgruppe) das Hamburger-Icon allein nicht als Symbol für „Navigation öffnen“ verstanden wird. Besser Icon und Text.

Das Icon kann man auch im CSS umsetzen, was auch die Möglichkeit eröffnet, das Hamburger-Icon im geöffneten Zustand durch ein × zu ersetzen, wie in meinem Beispiel: responsive menu (bei schmalem Viewport)

---

Warum wird aber hart zu den jeweiligen Ankern geschaltet statt sanft gescrollt?

Weil das Script nur bei Links im Navigationsmenü wirkt:

$("#myNavbar a").on('click', function(event) {

LLAP 🖖