原生js写的回到顶部特效

论坛 期权论坛 编程之家     
选择匿名的用户   2021-6-2 16:06   1973   0

css代码:

<style>
.top{
width:50px;
height: 50px;
border-radius: 5px;
background-color: #46e8ee;
font-size: 40px;
color: #ffffff;
line-height: 50px;
text-align: center;
cursor: pointer;
display: none;
position: fixed;
right: 15px;
bottom: 15px;
}
</style>

html代码:

<div class="top" id="top">^</div>

js代码:

<script>
topobj=document.getElementById('top');
// 当窗口发生滚动时候边滚动边计算高度
window.οnscrοll=function(){
// 获取滚动的高
st=document.documentElement.scrollTop;
if(st>=1000){
topobj.style.display='block';
}else{
topobj.style.display='none';
}
}
topobj.οnclick=function(){
// document.documentElement.scrollTop=0;
st=document.documentElement.scrollTop;
v=60; //速度
ftop=setInterval(function(){
// 滚动的高减去速度
st-=v;
if(st<=0){
st=0;
clearInterval(ftop);
}
document.documentElement.scrollTop=st;
},30)
}
</script>

转载于:https://www.cnblogs.com/afew/p/8677575.html

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP