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 相关文章推荐
javascript 保存文件到本地实现方法
Nov 29 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
ECMAScript6--解构
Mar 30 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
el-table树形表格表单验证(列表生成序号)
May 31 Javascript
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
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
js选项卡的实现方法
2015/02/09 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
Python 字典dict使用介绍
2014/11/30 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
Python使用Matlab命令过程解析
2020/06/04 Python
python/golang 删除链表中的元素
2020/09/14 Python
美国美妆网站:B-Glowing
2016/10/12 全球购物
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
银行金融服务方案
2014/06/11 职场文书
安全演讲稿开场白
2014/08/25 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
收银员岗位职责
2015/02/03 职场文书
八月迷情观后感
2015/06/11 职场文书
七一活动主持词
2015/06/29 职场文书