JQuery Animated ScrollTop funktioniert nicht

Ich versuche, die Seite beim Klicken auf den grünen Block nach '.block3' zu scrollen. Was fehlt mir hier? Ich kann es nicht funktionieren sehen und ich habe ähnliche Threads ohne Glück überprüft.JQuery Animated ScrollTop funktioniert nicht

$(document).ready(function() { 
 
    $('.down').click(function() { 
 
    alert("y no work?"); 
 
    $('html', 'body').animate({ 
 
     scrollTop: $('.block3').offset().top 
 
    }, 800, "easeOutQuart"); 
 
    }); 
 
});

.down { 
 
    background: green; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.block1,.block2,.block3 { 
 
    background: red; 
 
    width: 200px; 
 
    height: 600px; 
 
    margin: 1em 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="down"></div> 
 
<div class="block1"></div> 
 
<div class="block2"></div> 
 
<div class="block3"></div>

Quelle

2016-09-29 Calisto

Das Problem war die selector. Sie können jeweils nur ein Element blättern. Und für die Erleichterung brauchen Sie zusätzliche Bibliotheken.

Ich bemerkte, dass Ihre Schriftrolle nicht das Ende erreicht. Ich nehme an, das ist der Einzug

$(document).ready(function() { 
 

 
\t $('.down').click(function() { 
 
\t \t $('body').animate({scrollTop:$('.block3').offset().top}, 800, 'linear'); 
 
\t }); 
 
    
 
});

.down {background:green; width:50px; height:50px; } 
 
.block1, .block2, .block3 { background:red; width:200px; height:600px; margin: 1em 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="down"></div> 
 

 
<div class="block1"></div> 
 

 
<div class="block2"></div> 
 

 
<div class="block3"></div>

Quelle

2016-09-29 17:18:58

Try this:

Sie müssen jeden Wähler mit einem Komma trennen.

$(document).ready(function() { 
 
    
 
    $('.down').click(function() { 
 
     
 
     alert("y no work?"); 
 
     
 
     $('html,body').animate({ 
 
      
 
      scrollTop: $('.block3').offset().top}, 800, "linear"); 
 
    }) 
 
    
 
})

.down {background:green; width:50px; height:50px; } 
 
.block1, .block2, .block3 { background:red; width:200px; height:600px; margin: 1em 0;}

<div class="down"></div> 
 

 
<div class="block1"></div> 
 

 
<div class="block2"></div> 
 

 
<div class="block3"></div> 
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Quelle

2016-09-29 17:29:13 Ehsan

ich bemerkt, dass Sie JQuery UI nicht haben, dass der Grund sein könnte, warum easeOutQuart nicht funktioniert, linear ist in Ordnung, wenn Sie wollen easeOutQuart nicht verwenden.

Um easeOutQuart oder andere spezielle ui, umfassen JQuery UI

Quelle

2016-09-29 17:34:37 medev21

sind einfach jquery UI

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 

 
<html> 
 
<body> 
 
<div class="down"></div> 
 

 
<div class="block1"></div> 
 

 
<div class="block2"></div> 
 

 
<div class="block3"></div> 
 
<style> 
 
.down {background:green; width:50px; height:50px; } 
 
.block1, .block2, .block3 { background:red; width:200px; height:600px; margin: 1em 0;} 
 
</style> 
 
<script> 
 
$(document).ready(function() { 
 

 
\t $('.down').click(function() { 
 
     alert("y no work?"); 
 
\t \t $("html, body").animate({scrollTop:$('.block3').position().top}, 800, "easeOutQuart"); 
 
\t }); 
 
    
 
}); 
 
</script> 
 
</body> 
 
</html>

Bibliothek dann versuchen Sie es erneut alles Ihre Skripte sollten perfekt sind.

Vielen Dank!

Quelle

2016-09-29 17:34:44 Plycoder

Anstelle der Verwendung:

$("html, body").animate({scrollTop:$('.block3').position().top}, 800, "easeOutQuart");

Verwenden top + Objekthöhe:

$("html, body").animate({scrollTop:$('.block3').position().top + $('.block3').height()}, 800, "easeOutQuart");

Quelle

2016-09-29 18:35:42

JQuery Animated ScrollTop funktioniert nicht

Antwort

Verwandte Themen