JQuery Animate ScrollTopが機能しない

緑色のブロックをクリックすると、ページを '.block3'にスクロールダウンしようとしています。私はここで何が欠けていますか？私はそれを働かせることができないと私は幸運と同様のスレッドをチェックした。JQuery Animate ScrollTopが機能しない

$(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>

出典

2016-09-29 Calisto

問題がselectorました。一度に1つの要素だけをスクロールできます。また、イージングのために余分なライブラリが必要です。

あなたのスクロールが最後に達していないことに気付きました。あなたは、カンマで各セレクタを区切る必要があります

：私はこれを試してみてくださいインデント

$(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>

出典

2016-09-29 17:18:58

だと推測します。

$(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>

出典

2016-09-29 17:29:13 Ehsan

私はあなたがeaseOutQuartが動作していない理由かもしれないjQueryのUIを持っていないあなたはeaseOutQuartを使用したくない場合は、線形で結構です気づきました。 easeOutQuartまたは他の特別なUIが含まれるように

は、

出典

2016-09-29 17:34:37 medev21

JQuery UIを含めるだけで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>

ライブラリが再びあなたのスクリプトが完全にすべきすべてのものを試しています。

ありがとうございました！代わりに使用したの

出典

2016-09-29 17:34:44 Plycoder

：

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

使用トップ+オブジェクトの高さ：

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

出典

2016-09-29 18:35:42

JQuery Animate ScrollTopが機能しない

答えて

関連する問題