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学习笔记记录我的旅程
May 23 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 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
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
python实现数独算法实例
2015/06/09 Python
python生成验证码图片代码分享
2016/01/28 Python
python skimage 连通性区域检测方法
2018/06/21 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
高三历史教学反思
2014/01/09 职场文书
厨房管理计划书
2014/04/27 职场文书
好学生评语大全
2014/05/05 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
2015年老干部工作总结
2015/04/23 职场文书
总结会主持词
2015/07/02 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
初一英语教学反思
2016/02/15 职场文书
利用python做数据拟合详情
2021/11/17 Python