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代码
Dec 09 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
angular之ng-template模板加载
Nov 09 Javascript
页面点击小红心js实现代码
May 26 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
python with statement 进行文件操作指南
2014/08/22 Python
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
python分析网页上所有超链接的方法
2015/05/08 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
Python魔术方法专题
2020/06/19 Python
Django如何实现防止XSS攻击
2020/10/13 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
新电JAVA笔试题目
2014/08/31 面试题
Prototype如何更新局部页面
2013/03/03 面试题
五好党支部事迹材料
2014/02/06 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
大学生就业意向书
2015/05/11 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python
python 远程执行命令的详细代码
2022/02/15 Python
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB