04.12.2017, 19:53
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):
Habe eine Navbar mit den entsprechenden id's :
und dann habe ich die Abschnitte, zu denen ich scrollen will. Z.Bsp.:
Außerdem habe ich die bootstrap-Dateien im Header implementiert:
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.
Grüße,
Frank
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
});
});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>...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
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
