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中的常见排序算法
Mar 27 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
Jquery-data的三种用法
Apr 18 jQuery
js定时器+简单的动画效果实例
Nov 10 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
如何对react hooks进行单元测试的方法
Aug 14 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/09/07 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
js获取url传值的方法
2015/12/18 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
bpython 功能强大的Python shell
2016/02/16 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
pycharm设置注释颜色的方法
2018/05/23 Python
python读取xlsx的方法
2018/12/25 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
python 循环数据赋值实例
2019/12/02 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
校园运动会广播稿
2014/10/06 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
公司2015年终工作总结
2015/05/26 职场文书
五年级作文之成长
2019/09/16 职场文书
python实现简单区块链结构
2021/04/25 Python
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android