2017-07-07 24 views
0

Hier ist was ich habe.
Die Klickfunktion funktioniert und springt zu diesem Teil des Abschnitts, aber die Scrolling-Animation funktioniert nicht.jQuery scrolltop animieren nicht animieren

Alles, was ich falsch gemacht habe?

<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar"> 
     <div class="container text-right"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

      </div> 

<div class="collapse navbar-collapse text-left" id="navbar-collapse" > 
    <ul class="nav navbar-nav"> 
    <li><a href="#home">Home</a></li> 
    <li><a href="#skills">Skills</a></li> 
    <li><a href="#feedback">Feedback</a></li> 
    <li><a href="#about">About me</a></li> 
    <li><a href="#contact">Contact</a></li> 
    </ul> 
</div> 

<script> 
    $("#navbar").on("click", function(e) { 
    e.preventDefault(); 
    var section = $(this).attr("href"); 
    $("html, body").animate({ 
     scrollTop: $(section).offset().top 
    }, 1500); 
    });  
</script> 

Antwort

1

Es gibt kein Element #navbar auf Ihrer Seite, so dass die Click-Ereignis wird nie ausgelöst, und der Browser verhält sich wie gewohnt (mit dem Anker Springen) - versuchen, so etwas wie #navbar-collapse, oder .nav a.

0

Ändern Sie den jQuery etwas wie folgt aus:

$(".navbar-nav a").on("click", function(e) { 
    e.preventDefault(); 
    var section = $(this).attr("href"); 
    $("html, body").animate({ 
     scrollTop: $(section).offset().top 
    }, 1500); 
    }); 

Ihre Wähler ist falsch. Sie haben kein Element mit der ID navbar, was bedeutet, dass Ihr Ereignis-Listener nicht einmal ausgelöst wird. Deshalb animiert es nicht.