nicht angemeldet
smoothes scrollen mit bootstrap funktioniert nicht
Gunnar BittersmannHallo,
ich will entsprechend des Beispieles von w3schools.com eine Site sanft scrollen lassen, wenn man über das Menü einen neuen Punkt auswählt.
In der eingeladenen scrip.js steht die Funktion:
$(document).ready(function(){
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
Im html header habe ich benötigte Dateien eingeladen (bootstrap.min.css, jquery.min.js, bootstrap.min.js). Im html body steht in der Navigation die entsprechende id:
<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" >...
Warum wird aber hart zu den jeweiligen Ankern geschaltet statt sanft gescrollt?
-
@@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 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
@Gunnar Bittersmann
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) {Dafür muss ich im Menü die Links zu den Ankern setzen. Richtig? So sieht das bei mir aus:
<li><a href="#Portrait">Portrait</a></li> <li><a href="#Psychotherapie">Psychotherapie</a></li>...An den jeweiligen Content -Stellen habe ich entsprechend die id gesetzt:
<div id="Portrait" class="container-fluid bg-grey">...Sollte also funktionieren. oder? Macht's aber nicht.
Frank
-
@@FrankMe
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) {Damit registrierst du Eventhandler für alle Elemente, die auf
#myNavbar amatchen. Also wie ich sagte: für alle Links im Navigationsmenü.Es sollte nicht verwundern, dass
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">nicht auf#myNavbar amatcht.An den jeweiligen Content -Stellen habe ich entsprechend die id gesetzt:
<div id="Portrait" class="container-fluid bg-grey">...Ergänze da mal noch
tabindex="-1"für IE, damit bei Tastaturbedienung das angesprunge Element den Fokus erhält.LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
-
-
Tach!
Warum wird aber hart zu den jeweiligen Ankern geschaltet statt sanft gescrollt?
Weil das Script nur bei Links im Navigationsmenü wirkt:
Nö, es wirkt gar nicht, weil Javascript mit einer Fehlermeldung in der Console abbricht. Der Code in Bootstraps Javascript-Datei kann an das jQuery-Objekt nichts hinzufügen, das erst im danach geladenen Script erstellt wird.
dedlfix.
-