欢迎评论,指出不足,表达建议~
<!--
a 标签的a:hover兼容所有浏览器。默认跳转页面,没有值得话,刷新本页面。
写#target:锚点定位。
把href="javascript:;"可以消除默认刷新和锚点属性。
-->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
font-size: 14px;
-webkit-user-select: none;/*去除字体选中*/
}
html,body{
width: 100%;
height: 200%;
background: #CCCCCC;
background:-webkit-linear-gradient(top,#ccc,red,yellow,blue);
background:linear-gradient(top,#ccc,red,yellow,blue);/*背景过渡效果和兼容*/
}
a{
text-decoration: none;
color: #000000;
}
a:hover,a:active,a:target,a:visited{
text-decoration: none;
color: #000000;
}
#btn{
display: none;
position: fixed;
right: 10px;
bottom: 10px;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: -webkit-linear-gradient(top,#000,red,yellow,blue);
border-radius:50% ;
opacity:0.5;
filter:alpha(opacity=50);
}
#btn:hover{
opacity:1;
filter:alpha(opacity=100);/*透明度兼容*/
}
</style>
</head>
<body>
<a href="javascript:;" id="btn">回到顶部</a>
</body>
<script type="text/javascript">
// 简单回到顶部,没有过渡延迟。
//window.onscroll=function(){
// var cw=document.documentElement.scrollTop||document.body.scrollTop;
// if(cw>300){
// btn.style.display="block";
// }else{
// btn.style.display="none";
// }
//}
//btn.onclick=function(){
// document.documentElement.scrollTop = document.body.scrollTop=0;
//}
var obtn=document.getElementById("btn");
window.onscroll=computedDisplay;
function computedDisplay(){
var cw=document.documentElement.scrollTop||document.body.scrollTop;
if(cw>300){
obtn.style.display="block";
}else{
obtn.style.display="none";//到一定距离才显示。
}
}
//回到顶部进阶
//总时间,500ms。
//频率,10ms一步。
//总距离,当前到top(0)
//步长,每一次距离.总距离/总时间*频率.
obtn.onclick=function(){
this.style.display="none"
window.onscroll=null;
//让按钮隐藏,消除到一定距离显示按钮事件。
var duration=500,interval=10;//总时间和频率
var target=document.documentElement.scrollTop||document.body.scrollTop;//滑动总距离
var step=(target/duration)*interval;//每次走的距离
var timer=window.setInterval(function(){
var curTop=document.documentElement.scrollTop||document.body.scrollTop;
if(curTop===0){
window.clearInterval(timer);
window.onscroll=computedDisplay;//回到顶部的时候要开启事件。
return;
}
curTop-=step;
document.documentElement.scrollTop=document.body.scrollTop=curTop;
},interval)
}
</script>
</html>
你的意中人踏过无数bug来接你~