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 相关文章推荐
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
利用JavaScript写一个简单计算器
Nov 27 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 PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
Python制作简单的网页爬虫
2015/11/22 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
python实现根据文件格式分类
2019/10/31 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
会计自荐书
2013/12/02 职场文书
工程项目经理岗位职责
2013/12/15 职场文书
房屋租赁协议书
2014/04/10 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
违章停车检讨书
2014/10/21 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
营销计划书范文
2015/01/17 职场文书
电工生产实习心得体会
2016/01/22 职场文书
分享Python获取本机IP地址的几种方法
2022/03/17 Python
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server