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 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 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
一个SQL管理员的web接口
2006/10/09 PHP
ADODB的数据库封包程序库
2006/12/31 PHP
php 读取shell管道传输过来的内容
2010/03/01 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
PHP生成树的方法
2015/07/28 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
Symfony查询方法实例小结
2017/06/28 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
Python自动连接ssh的方法
2015/03/07 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
python自定义函数def的应用详解
2020/06/03 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
高三政治教学反思
2014/02/06 职场文书
代办委托书怎么写
2014/08/01 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
孟佩杰观后感
2015/06/17 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python