思路:通过scrollTop这个属性实现,当scollTop=0的时候就回到页面顶部。
代码:
<!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>
#po{
width:1000px;
height:2000px;
background-color:#CCC;
margin:auto;
}
</style>
</head>
<body>
<div id="po">
</div>
<div id="gotop" style="position:fixed;top:500px;left:1200px;display:block;"><img src="gotop.png"/></div>
<script>
var g=document.getElementById("gotop");
var p=g.firstChild;
g.οnmοusemοve=function(){
p.src="gotop2.png";
p.style.cursor="pointer";
}
g.οnmοuseοut=function(){
p.src="gotop.png";
}
g.οnclick=function(){
//IE请使用document.documentElement.scrollTop
document.body.scrollTop=0;
}
</script>
</body>
</html>
效果:
已知缺陷:①没实现到一定高度才出现回到顶部的按钮,这样按钮始终都是在页面上的。②没有那种过渡的感觉,别人的都是先快快到顶部就慢了下来,我不知道这是怎么实现的,╮(╯▽╰)╭。
一直缺陷解决了,哈哈很好解决的,来个回到顶部2.0:
①那种过渡的效果,也就是弹性的效果,例如:length=length/speed;然后循环调用这句,这样length的长度是减小的越来越快。这样就有动态的效果了。②到一定高度出现,也很简单实现,就是window中有个scroll状态。
代码:
// JavaScript Document
window.οnlοad=function(){
var speed=1.1;
var g=document.createElement("div");
g.id="gotop";
var p=document.createElement("img");
p.src="img/gotop.png";
document.body.appendChild(g);
g.appendChild(p);
g.οnmοusemοve=function(){
p.src="img/gotop2.png";
p.style.cursor="pointer";
}
g.οnmοuseοut=function(){
p.src="img/gotop.png";
}
//让goto页面一加载就消失,当超过一定高度出现。
p.style.display="none";
//获取scrollTop的值,解决浏览器兼容性问题
function getScrollTop(){
var value=document.body.scrollTop||document.documentElement.scrollTop;
return value;
}
//设置scrollTop的值
function setScrollTop(value){
document.body.scrollTop=value;
document.documentElement.scrollTop=value;
}
//当滑动到500的时候就出现goTop
window.οnscrοll=function(){if(getScrollTop()>500){
p.style.display="";
}
else{
p.style.display="none";
}
}
g.οnclick=function(){
var timer=setInterval(function(){
setScrollTop(getScrollTop()/speed);
if(getScrollTop()<1)
clearInterval(timer);
},10);
}
}
效果:
很赞是吧,代码也很少。O(∩_∩)O哈哈~