JS为返回顶部按钮添加动画效果

html部分

1
2
3

<div id="ease-target"><span id="ease\_go\_top"><i class="fa fa-chevron-up"></i></span>
</div>

js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 返回顶部
var ease\_go\_top = document.getElementById("ease\_go\_top");
function ease_scrollToTop(t){
var x = 0;
var scroll_Top = document.body.scrollTop || document.documentElement.scrollTop;
var time = setInterval(function(){
x+=scroll_Top*30/t;
if(x>scroll_Top){
clearInterval(time);
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}else{
document.body.scrollTop = scroll_Top-x;
document.documentElement.scrollTop = scroll_Top-x;
}
},30)
}
ease\_go\_top.onclick = function(){
ease_scrollToTop(1000);
}
// end-返回顶部

添加css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#ease\_go\_top{
position: fixed;
right: 10px;
bottom: 10px;
width: 50px;
height: 50px;
text-align: center;
background: rgba(255,255,255,0.6);
font-size: 30px;
cursor: pointer;

}
#ease\_go\_top i{
font-size: 30px;
}

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×