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 相关文章推荐
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
微信小程序canvas实现签名功能
Jan 19 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代码优化及php相关问题总结
2006/10/09 PHP
第十四节--命名空间
2006/11/16 PHP
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
Javascript注入技巧
2007/06/22 Javascript
JavaScript国旗变换效果代码
2008/08/13 Javascript
jQuery 表格工具集
2010/04/25 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
简单说明Python中的装饰器的用法
2015/04/24 Python
Python中的hypot()方法使用简介
2015/05/18 Python
Python单例模式实例详解
2017/03/01 Python
python flask中静态文件的管理方法
2018/03/20 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
护理自我鉴定范文
2013/10/06 职场文书
客房主管岗位职责
2013/12/09 职场文书
酒店前厅员工辞职信
2014/01/08 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
2014年档案室工作总结
2014/12/01 职场文书
消防验收申请报告
2015/05/15 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书