In our previous article, we wrote a case of Taobao’s sidebar . In this case, after our page slid to a certain length, the sidebar not only changed to a fixed location, but also added a box that went back to the top. We asked it to click After that, we can go back to the top. We usually think of setting the value of the href attribute of the a tag directly to #. This can indeed go back to the top, but it is directly back to the top, which is not beautiful at all. We want that kind of slowness. The elegant effect of reaching the top (cough, cough), at this time we still need to use our old friend -------- animation function, in addition to a scroll method of window.scroll , Let's talk about this method first
window.scroll：
In this code, we set up three boxes to allow the page to scroll. There is a button at the bottom of the page. After clicking, the page can be scrolled to the target position. scroll (x,y), x represents horizontal scrolling, y represents Scroll vertically, no unit is required , and then print out the distance that the current page is rolled up after scrolling. The current distance should be equal to our 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>It can be seen that our output value is indeed the value of y, 100:
With this method in hand, we can revamp our animation function:
The modified animation function:
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)
}Then call our animation function in the click event of the a tag.
a.addEventListener('click',function(){ run(window,0); })
Full code:
<!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>