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 相关文章推荐
jquery ajax执行后台方法
Mar 18 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
vue.js实现照片放大功能
Jun 23 Javascript
微信小程序实现简单购物车功能
Dec 30 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下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
python实现二分查找算法
2017/09/21 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
python 字典中取值的两种方法小结
2018/08/02 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
Python reversed函数及使用方法解析
2020/03/17 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
电大毕业自我鉴定
2014/02/03 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL
mysql 索引合并的使用
2021/08/30 MySQL