smoothes scrollen mit bootstrap funktioniert nicht bearbeitet von FrankMe 27.11.2017 20:44 Hallo, ich will entsprechend des Beispieles von [w3schools.com](https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_scrollspy_animate&stacked=h) eine Site sanft scrollen lassen, wenn man über das Menü einen neuen Punkt auswählt. In der eingeladenen scrip.js steht die Funktion: ~~~JavaScript $(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: ~~~HTML <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?**
smoothes scrollen mit bootstrap funktioniert nicht bearbeitet von Matthias Apsel 27.11.2017 21:09 Hallo, ich will entsprechend des Beispieles von [w3schools.com](https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_scrollspy_animate&stacked=h) 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?**
nicht angemeldet nicht angemeldet
