本帖最后由 奋斗丶小Z 于 2016-1-11 10:55 编辑
[HTML] 纯文本查看 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>回到顶部</title>
<style type="text/css">
body{margin:0;padding:0;height:2000px;}
#div1{margin:0;padding:0;width:76px;height:137px;background:url('http://qgxy-links.stor.sinaapp.com/images/top.png') no-repeat;}
#div1:hover{background:url('http://qgxy-links.stor.sinaapp.com/images/top_hover.png') no-repeat;}
</style>
<script type="text/javascript" language="javascript">
window.onload=function(){
var oDiv = document.getElementById("div1");
divMoveTo();
oDiv.onclick=function(){
moveToTop();
}
document.body.onscroll=function(){
var myScrollTop = document.documentElement.scrollTop||document.body.scrollTop;//滚动条已滚动的高度
var myClientHeight = document.documentElement.clientHeight||document.body.clientHeight;//可视区高
var oDiv = document.getElementById("div1");
if(myScrollTop>=myClientHeight){
oDiv.style.display="block";
}else{
oDiv.style.display="none";
}
}
}
function divMoveTo(){
var oDiv = document.getElementById("div1");
oDiv.style.position="fixed";//设置定位
var myClientWidth = document.documentElement.clientWidth||document.body.clientWidth;//可视区宽度
var myClientHeight = document.documentElement.clientHeight||document.body.clientHeight;//可视区高度
var divWidth = oDiv.offsetWidth;//div实际宽度
var divHeight = oDiv.offsetHeight;//div实际高度
oDiv.style.left=myClientWidth-divWidth-30+"px";
oDiv.style.top=myClientHeight-divHeight-30+"px";
oDiv.style.display="none";//隐藏DIV
}
/*
回到顶部
*/
function moveToTop(){
var timer = null;
var iTarget = 0;//顶部的位置为0
clearInterval(timer);//防止用户多次点击回到顶部，先清除之前已经创建的timer计时器
function move(){
var myScrollTop = document.documentElement.scrollTop||document.body.scrollTop;//滚动条已滚动的高度
document.title=myScrollTop;
var iSpeed = Math.ceil(myScrollTop/20);//变速运动
if(myScrollTop==iTarget){
clearInterval(timer);
}else{
//兼容性
document.documentElement.scrollTop=myScrollTop-iSpeed;
document.body.scrollTop=myScrollTop-iSpeed;
}
}
timer=setInterval(move,10);
}
</script>
</head>
<body>
<div id="div1">
</div>
看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />看效果<br />
</body>
</html>
效果如图所示：
| 
[复制链接]
发表于 2016-1-10 16:55
|
发表于 2016-1-10 17:07
，，自己学习，练习用