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 相关文章推荐
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 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 Hash函数,增强密码安全
2011/02/25 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
让焦点自动跳转
2006/07/01 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
获取Django项目的全部url方法详解
2017/10/26 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
联想中国官方商城:Lenovo China
2017/10/18 全球购物
比驿:全球酒店比价网
2018/06/20 全球购物
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
校运会入场式解说词
2014/02/10 职场文书
物理教学随笔感言
2014/02/22 职场文书
幼儿园家长寄语
2014/04/02 职场文书
村干部培训方案
2014/05/02 职场文书
预备党员公开承诺书
2014/05/28 职场文书
python析构函数用法及注意事项
2021/06/22 Python
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js