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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
javascript 防止刷新,后退,关闭
Aug 07 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
vue-cli 如何打包上线的方法示例
May 08 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 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操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
PHP面向对象详解(三)
2015/12/07 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
python3简单实现微信爬虫
2015/04/09 Python
Python之str操作方法(详解)
2017/06/19 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
Python实现京东抢秒杀功能
2021/01/25 Python
pandas按条件筛选数据的实现
2021/02/20 Python
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
了解AppleTalk协议吗
2014/04/01 面试题
二年级数学教学反思
2014/01/21 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
介绍信格式
2015/01/30 职场文书
工作收入证明模板
2015/06/12 职场文书
Android 中的类文件和类加载器详情
2022/06/05 Java/Android