jQuery Bildlauf ist nicht animieren

Ich versuche, meine Seite zu einem bestimmten <section> auf Klick auf eine href zu scrollen. Ich war in der Lage, die Seite zu springen, um die <section> Ich will es, aber es ist nicht glatt (es ist wie mein .animate funktioniert nicht in der jQuery).jQuery Bildlauf ist nicht animieren

HTML

<li><a href="#about" class="about-link">about us</a></li> 

<section class="about" id="about"> 
    <div class="container"> 
     <h1>about us</h1> 
     <p>text</p> 
    </div> 
</section>

jQuery

$(document).ready(function(){ 
    // Add smooth scrolling to all links 
    $(".about-link").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 
    }); 
});

Vielen Dank im Voraus!

Quelle

2016-09-21 Nicholas Van Son

können Sie mit Elementen id wie unten animieren.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
\t <button class="click">Click Me</button> 
 
\t <div id="mydiv" style="border:2px solid black;width:800px;height:900px; background-color:orange; position:absolute;top:1000px;margin:20px;"> 
 
\t \t hello anuradh 
 
\t </div> 
 
</div> 
 

 
<script type="text/javascript"> 
 
\t $(document).ready(function(){ 
 
\t \t $(".click").on('click',function(){ 
 
\t \t \t //window.location = "#mydiv"; 
 

 
\t \t \t $('html, body').animate({ 
 
     \t \t  scrollTop: $("#mydiv").offset().top 
 
    \t \t \t \t }, 2000); 
 
\t \t \t }); 
 
\t }); 
 
</script> 
 

 
</body> 
 
</html>

Quelle

2016-09-21 03:38:16

Ich habe Ihre jQuery und es bewegt mich zu der '

' mit der ID, aber es ist immer noch nicht und animierte Bewegung, nur ein sofortiger Sprung. Außerdem versuche ich es mit einem href anstelle einer Schaltfläche zu tun. –

so scrollt das reibungslos, also warum Ihr eins. hast du die "position" mit "top" value richtig angegeben. –

Ich glaube, dass es den richtigen oberen Wert hat, weil es dorthin springt, wo es hingehört, wenn ich auf den Link klicke, aber es tut es immer noch nicht glatt –

$(document).ready(function() { 
    // Add smooth scrolling to all links 
    $(".about-link").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 
    }); 
});

Es ist nichts falsch mit Ihrem Code. Hier ist ein jsfiddle Ich konstruierte es demonstrieren. Wie Sie sehen können, funktioniert es perfekt.

Hier sind einige Dinge zu beachten:

Stellen Sie sicher, tatsächlich jquery in Ihrem Arbeitsbereich haben.
Stellen Sie sicher, Raum zu bewegen (ich nehme an, Sie tun und Sie auf dem Laufenden nur einen Ausschnitt)

Ich hoffe, dass Sie es geschafft, um es zu arbeiten!

Quelle

2016-09-21 04:09:05

jQuery Bildlauf ist nicht animieren

Antwort

Verwandte Themen