如何動畫滾動從第一頁到另一個等

我創建了4個div錨：yak0，yak1，yak2，yak3在我的html文件中。從yak0到yak1 - 第一頁，從yak1到yak2 - 第二頁等等。當用戶滾動頁面時，我想從第一頁到第二頁等動畫滾動。我寫了一些代碼，但有些錯誤。因爲頁面像春天一樣上下震動。如何動畫滾動從第一頁到另一個等

window.onscroll = function() { 
 

 
\t var teg0 = document.getElementById("yak0"); 
 
\t var teg1 = document.getElementById("yak1"); 
 
\t var teg2 = document.getElementById("yak2"); 
 
\t var teg3 = document.getElementById("yak3"); 
 

 
\t var h = document.documentElement.clientHeight; 
 

 
\t var hi0 = 0; 
 
    var hi1 = hi0+h; 
 
    var hi2 = hi1+h; 
 
\t var hi3 = hi2+h; 
 

 
\t if (window.pageYOffset > hi0 && window.pageYOffset <= hi1) 
 
\t \t $('body').animate({scrollTop: $(teg1).offset().top}, 1000); 
 
\t 
 

 
\t if (window.pageYOffset > hi1 && window.pageYOffset <= hi2) 
 
\t \t $('body').animate({scrollTop: $(teg2).offset().top}, 1000); 
 

 
    if (window.pageYOffset > hi2 && window.pageYOffset <= hi3) 
 
\t \t $('body').animate({scrollTop: $(teg3).offset().top}, 1000); \t 
 
}

來源

2017-03-03 Saina-Kuo Prokopyeva

的滾動是一個進步，而每一次進步你有生1000ms的設置。所以你的代碼在運行時阻塞運行。我想你有成千上萬的等待進程，所以它不起作用，導致runing沒有完成;

也許你可以試試這個，和測試：

$('body').animate({scrollTop: $(teg1).offset().top}, 1000, function(){ 
    console.log('----let me see this runing how many times----')

}）;

或設置間隔1ms，並檢查結果...

來源

2017-03-05 06:33:16 jyjin

如何動畫滾動從第一頁到另一個等

回答

相關問題