Question

我在我的html文件中创建了4个div锚：yak0，yak1，yak2，yak3。从yak0到yak1 - 第一页，从yak1到yak2 - 第二页等。当用户滚动页面时，我想动画从第一页滚动到另一页等。我写了一些代码，但有些不对劲。因为页面像春天一样上下摇晃。

window.onscroll = function() {

	var teg0 = document.getElementById("yak0");
	var teg1 = document.getElementById("yak1");
	var teg2 = document.getElementById("yak2");
	var teg3 = document.getElementById("yak3");

	var h = document.documentElement.clientHeight;

	var hi0 = 0;
    var hi1 = hi0+h;
    var hi2 = hi1+h;
	var hi3 = hi2+h;

	if (window.pageYOffset > hi0 && window.pageYOffset <= hi1) 
		$('body').animate({scrollTop: $(teg1).offset().top}, 1000);
	

	 if (window.pageYOffset > hi1 && window.pageYOffset <= hi2 ) 
		 $('body').animate({scrollTop: $(teg2).offset().top}, 1000); 

     if (window.pageYOffset > hi2 && window.pageYOffset <= hi3 ) 
		$('body').animate({scrollTop: $(teg3).offset().top}, 1000); 	
}

Answer 1

滚动是一个进度，您使用动画1000毫秒设置的每个进度。所以你的代码运行阻止了animate。我猜你有成千上万的1000ms等待进展，所以它不起作用，导致运行没有完成;

也许你可以试试这个，并测试一下：

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

}）;

或者将间隔设置为1ms，并检查结果......

如何动画从第一页到另一页的滚动等

1 个答案: