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。您一次只能滾動一個元素。而爲了緩解你需要額外的庫。

我注意到你的卷軸沒有達到最後。我相信這是縮進

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

我注意到你沒有JQuery用戶界面，這可能是爲什麼easeOutQuart不工作的原因，如果你不想使用easeOutQuart線性的罰款。

要包括easeOutQuart或其他特殊的UI，包括JQuery UI

來源

2016-09-29 17:34:37 medev21

就包括然後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");

使用top +物體高度：

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

來源

2016-09-29 18:35:42

JQuery Animate ScrollTop不起作用

回答

相關問題