我们之前的文章写过一个 淘宝侧边栏 的案例，在这个案例中我们的页面下滑至一定长度后侧边栏除了变为固定定位外还多出了一个回到顶部的盒子，我们要求其点击后就可以回到顶部，我们通常会想到直接给 a 标签的 href 属性设置值为 #，这的确可以回到顶部，但是其是直接回到顶部，一点也不美观，我们想要那种缓缓地到达顶部的优雅效果（咳咳咳），这时我们仍然要用到我们的老朋友 -------- 动画函数，除此之外还需要用到一个 window.scroll 的滚动方法，我们首先讲一下这个方法
window.scroll：
此代码中，我们设置了三个盒子，让页面能滚动起来，在页面最下方有一个按钮，点击后即可让页面滚动至目标位置，scroll (x,y)，x代表横向滚动，y代表竖直方向滚动，不需要带单位，滚动后再打印输出一个当前页面被卷上去的距离，当前距离按理应该等于我们的 y
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<button>按钮</button>
<script>
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
window.scroll(0,100);
console.log(window.pageYOffset);
})
</script>
</body>
可见我们的输出值确实是y的值，100：
有了这个方法，我们就可以将我们的动画函数进行改造一番：
改造后的动画函数：
function run(obj,aim,callback){
clearInterval(obj.timer)
obj.timer=setInterval(function(){
if(aim==window.pageYOffset){ //当页面滚上去的距离等于我们的目标值时，就停止计时器
clearInterval(obj.timer);
if(callback){
callback();
}
}else{
step=(aim-window.pageYOffset)/10;
step=step>0?Math.ceil(step):Math.floor(step);
window.scroll(0,window.pageYOffset+step); //定时器每执行一次就让页面滚动一次，x=0，因为横向不需要滚动
}
},20)
}
然后再在a标签的点击事件里调用我们的动画函数就好啦
a.addEventListener('click',function(){
run(window,0);
})
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
position: absolute;
right: 0px;
top: 300px;
width: 100px;
border: 1px solid;
background-color: rgb(97, 97, 97);
}
.top{
width: 90px;
height: 150px;
margin: 5px;
background-color: rgb(255, 187, 79);
}
.center{
width: 90px;
height: 70px;
margin: 5px;
background-color: rgb(165, 165, 165);
display: none;
}
.bottom{
width: 90px;
height: 150px;
margin: 5px;
background-color: rgb(202, 96, 35);
}
.left{
float: left;
margin-right: 10px;
width: 110px;
height: 2200px;
background-color: rgb(99, 99, 99);
}
.right{
box-sizing: border-box;
float: left;
width: 1200px;
height: 2200px;
background-color: rgb(98, 98, 98);
padding: 10px;
}
.innertop{
box-sizing: border-box;
width: 1180px;
height: 230px;
margin-bottom: 10px;
background-color: rgb(155, 155, 155);
}
.innercenter{
box-sizing: border-box;
width: 1180px;
height: 530px;
margin-bottom: 10px;
background-color: rgb(155, 155, 155);
}
.innerbottom{
box-sizing: border-box;
width: 1180px;
height: 1330px;
margin-bottom: 10px;
background-color: rgb(155, 155, 155);
}
a{
color: azure;
padding: 11px;
text-align: center;
line-height: 70px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="box">
<div class="top"></div>
<div class="center"><a href="javascript::">回到顶部</a></div>
<div class="bottom"></div>
</div>
<div class="left"></div>
<div class="right">
<div class="innertop"></div>
<div class="innercenter"></div>
<div class="innerbottom"></div>
</div>
<script>
var topbox=document.querySelector('.innertop')
var centerbox=document.querySelector('.innercenter')
var bottombox=document.querySelector('.innerbottom')
var box=document.querySelector('.box');
var a=document.querySelector('a');
var center=document.querySelector('.center')
var distance1=window.centerbox.offsetTop;
var distance2=window.box.offsetTop-distance1
var distance3=window.bottombox.offsetTop
window.addEventListener('scroll',function(){
if(window.pageYOffset>=distance1){
box.style.position='fixed'
box.style.top=distance2+'px'
}else{
box.style.position='absolute'
box.style.top=300 +'px'
}
if(window.pageYOffset>=distance3){
center.style.display='block'
}else{
center.style.display='none'
}
})
function run(obj,aim,callback){
clearInterval(obj.timer)
obj.timer=setInterval(function(){
if(aim==window.pageYOffset){
clearInterval(obj.timer);
if(callback){
callback();
}
}else{
step=(aim-window.pageYOffset)/10;
step=step>0?Math.ceil(step):Math.floor(step);
window.scroll(0,window.pageYOffset+step);
}
},20)
}
a.addEventListener('click',function(){
run(window,0);
})
</script>
</body>
</html>
