<div id='page1'>
<button id='next'>下一页</button>
<div id='page2'>
<button id='last'>上一页</button >
</div>
</div>
//获取到所有功能标签
var next = document.getElementById('next')
var last = document.getElementById("last")
var page2 = document.getElementById('page2')
var timer1;//另外定义一个定时器，为了区分timer，方便停止其中的一个
//点击next按钮后，page2页面缓缓上升，遮挡住page1页面
next.onclick = function(){
clearInterval(timer1)//如果不清理以前的定时器，有可能两个同时在执行从而导致错误
var timer = setInterval(function(){
//在每次修改top值判断当前page2是否达到页面顶部，到达则清除定时器
if(page2.offsetTop <= 0){
clearInterval(timer)
}else{
page2.style.top = page2.offsetTop - 10 +'px';
}//最好放在else里，写在外面可以实现，但是双击下一页的话会出现问题
},10);
}
last.onclick = function(){
timer1 = setInterval(function(){
//在每次修改top值判断当前page2是否达到页面底部，到达则清除定时器
if(page2.offsetTop >= 500){
clearInterval(timer1)
}else{
page2.style.top=page2.offsetTop+10+'px';
}//最好放在else里,没有判断的话，一点击就会移动，而不是判断完移动
},10);
}
