JS实现回到顶部按钮的代码
JavaScript #回到顶部2012-05-20 22:50
现在很多网站都有回到顶部按钮，下面是一个回到顶部按钮的示例。用了缓动效果。功能算比较实用的。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个网yige.org</title>
<style type="text/css">
#btn1{ position:fixed; bottom:10px; right:5px;}
</style>
<script type="text/javascript">
window.onload=function()
{
var oBtn=document.getElementById('btn1');
var bSys=true;
var timer=null;
//检测用户是否拖动了滚动条
window.onscroll=function()
{
if(!bSys) //如果用户在回去时拖动了滚动条则删除定时器
{
clearInterval(timer);
}
bSys=false;
}
oBtn.onclick=function()
{
timer=setInterval(function(){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var iSpeed=Math.floor(-scrollTop/8);
if(scrollTop==0)
{
clearInterval(timer);
}
bSys=true;
document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed;
},30)
}
}
</script>
</head>
<body style="height:2000px;">
<input type="button" value="回到顶部" id="btn1" />
<h1>回到顶部按钮</h1><br />
</body>
</html>相关文章
- Javascript中匿名函数的调用方法 2012/05/19
- 比较js的对象 2012/05/19
- JavaScript将光标定位于输入框最右侧的方法 2012/05/19
- Javascript操作select控件(新增、修改、删除、选中等） 2012/05/19
- ajax中文乱码问题解决方法 2012/05/19
- javascript检测浏览器及其版本的代码 2012/05/19
- JavaScript实现禁止右键、复制、另存为、查看源文件 2012/05/18
- javascript解决图片缩放问题 2012/05/18
- JavaScript随机数 2012/05/18
- Javascript键盘事件的组合使用 2012/05/18