700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html5回到顶部代码 JS返回顶部实例代码

html5回到顶部代码 JS返回顶部实例代码

时间:2019-08-12 09:29:00

相关推荐

html5回到顶部代码 JS返回顶部实例代码

本文实例为大家分享了JS返回顶部实例代码,供大家参考,具体内容如下

html/css部分

Document

.container{

width:1190px;

margin: 0px auto;

}

.container a{

display: none;

width:40px;

height:40px;

background: url(/535e0dc100010e9c00400080.jpg) no-repeat;

position: fixed;

left:95%;

bottom: 50px;

}

.container a:hover{

background: url(/535e0dc100010e9c00400080.jpg) no-repeat;

background-position: left -40px;

}

JS部分

window.οnlοad=function(){

var obtn=document.getElementById("btn");

var clientHeight=document.documentElement.clientHeight||ocument.body.clientHeight;

var isTop=true;

var timer=null;

window.οnscrοll=function(){

var topH=document.documentElement.scrollTop||document.body.scrollTop;

if(topH>clientHeight){

obtn.style.display="block";

}else{

obtn.style.display="none";

}

}

obtn.οnclick=function(){

timer=setInterval(function(){

var topH=document.documentElement.scrollTop||document.body.scrollTop;

var stepLength=Math.ceil(topH/5);

document.documentElement.scrollTop=document.body.scrollTop=topH-stepLength;

if(topH==0){

clearInterval(timer);

}

},30);

}

}

学习视频地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。