Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Smooth Scrolling funktioniert nicht
#1
Hallo,

ich habe ein Smooth Scrolling von bootstrap kopiert.,
aber leider funktioniert es nicht.
Es sollte, wenn ein Menüpunkt geklickt wird, die Website smooth dort hin gescrollt werden.

Ich implementiere folgendes Script (js/script.js):
Code:
$(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
    });
});
Habe eine Navbar mit den entsprechenden id's :
Code:
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="400" >
 <div class="row content" >
  <div class="sidenav margin_padding_0" > <!-- col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2  -->
     <div class="navbar-header">
       <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>
     <div class="collapse navbar-collapse navbar-right" id="myNavbar" >
       <ul class="nav navbar-nav" style="font-size: 0.8em;">
         <li><a href="#Start">Start</a></li>
         <li><a href="#psychotherapie">Therapie</a></li>
         <li><a href="#coaching">Coaching</a></li>...
und dann habe ich die Abschnitte, zu denen ich scrollen will. Z.Bsp.:
Code:
<div id="coaching" class="container-fluid bg-white">

Außerdem habe ich die bootstrap-Dateien im Header implementiert:
  • bootstrap.min.css
  • jquery.min.js

  • bootstrap.min.js
Zu sehen ist die problematische Site hier:
https://www.buettner-psychotherapie.de/Test/

Hat jemand Tipps oder Hinweise, woran es liegt?

Im übrigen habe ich mir mittels Chrome und F12 (Entwicklertools) Fehler anzeigen lassen (1 Fehler, 1 Warnung). Aber leider bringt dies mich auch nicht weiter.
Zitat:jquery.min.js:2 Uncaught TypeError: $(...).scrollspy is not a function
    at HTMLDocument.<anonymous> (script.js:25)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)

Grüße,
Frank
Zitieren
#2
Du musst den einzelnen Links auch eine ID zuweisen, sonst funktioniert das nicht. Im Regelfall ist das nav-link smooth-scroll
Zitieren
#3
(11.12.2017, 18:32)risa-kito schrieb: Du musst den einzelnen Links auch eine ID zuweisen, sonst funktioniert das nicht. Im Regelfall ist das nav-link smooth-scroll

Das verstehe ich nicht.
Ich kann nicht mehreren Elementen die selbe id zuweisen, da man id's jeweils nur einem Element zuweisen kann.

Wo hin sollen diese id's verweisen?

Hast Du ein Code-Beispiel?

Frank
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste