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 调试器简介
Feb 21 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
简述Vue中容易被忽视的知识点
Dec 09 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入门学习的几个不错的实例代码
2008/07/13 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
PHP速成大法
2015/01/30 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
详解vue-cli3使用
2018/08/14 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
python查看zip包中文件及大小的方法
2015/07/09 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
python将数组n等分的实例
2019/12/02 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
Python 解析xml文件的示例
2020/09/29 Python
Python基于execjs运行js过程解析
2020/11/27 Python
物理专业本科生自荐信
2014/01/30 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
小学运动会报道稿
2014/10/04 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书