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下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
JavaScript实现select添加option
Jul 03 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
vue路由的配置和页面切换详解
Sep 09 Javascript
Vue + ts实现轮播插件的示例
Nov 10 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
dedecms模版制作使用方法
2007/04/03 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
php自定文件保存session的方法
2014/12/10 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
vue实现点击图片放大效果
2017/08/15 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
家长建议怎么写
2014/05/15 职场文书
2014年电工工作总结
2014/11/20 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书