js控制滚动条缓慢滚动到顶部实现代码


Posted in Javascript onMarch 20, 2013

先把下面的代码拷贝到个html中,运行看效果

<html> 
<head> 
<script type="text/javascript"> 
var currentPosition,timer; 
function GoTop(){ 
timer=setInterval("runToTop()",1); 
} 
function runToTop(){ 
currentPosition=document.documentElement.scrollTop || document.body.scrollTop; 
currentPosition-=10; 
if(currentPosition>0) 
{ 
window.scrollTo(0,currentPosition); 
} 
else 
{ 
window.scrollTo(0,0); 
clearInterval(timer); 
} 
} 
</script> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">饭</div> 
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">吃</div> 
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">家</div> 
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">回</div> 
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">你</div> 
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">带</div> 
<div id="back-up" onclick="GoTop()" style="border:1px solid red;height:100px;width:15px;position:fixed;cursor:pointer;right:10px;bottom:30px;">返回顶部</div> 
<script> 
window.scrollTo(0,document.body.scrollHeight); 
</script> 
</body> 
</html>

速度可以自己控制哦。
Javascript 相关文章推荐
document.all与WEB标准
May 13 Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
JSON+JavaScript处理JSON的简单例子
Mar 20 #Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 #Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 #Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 #Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 #Javascript
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 #Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 #Javascript
You might like
基于mysql的bbs设计(三)
2006/10/09 PHP
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
img的onload的另类用法
2008/01/10 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
Python 数据结构之堆栈实例代码
2017/01/22 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
什么是命名空间(NameSpace)
2015/11/24 面试题
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
技术总监个人的自我评价范文
2013/12/18 职场文书
会计岗位描述
2014/02/22 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
房屋继承公证书
2014/04/10 职场文书
火箭队口号
2014/06/18 职场文书
失职检讨书大全
2015/01/26 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers