js控制滚动条缓慢滚动到顶部实现代码
更新时间：2013年03月20日 16:21:47 作者：
滚动条缓慢滚动到顶部这样的效果想必大家在浏览网页的时候都有见过吧，本文使用js实现下，感兴趣的你可不要错过了哈，希望可以帮助到你
先把下面的代码拷贝到个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>
速度可以自己控制哦。
复制代码 代码如下:
<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中双等号(==)和三等号(===)有何不同以及何时使用它们的相关资料,在JavaScript中"=="和"==="都是比较运算符,用于比较两个值是否相等,需要的朋友可以参考下2024-01-01
滑轮滚动页面的事件在网页特效中进场遇到，下面通过示例为大家介绍下原生JS绑定滑轮滚动事件并兼容浏览器2014-06-06
这篇文章主要为大家详细介绍了js canvas实现圆形流水动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要介绍了js字符串类型String常用操作,结合实例形式总结分析了javascript字符串类型String常用方法及相关操作注意事项,需要的朋友可以参考下2019-07-07
最近有朋友问我node环境和浏览器的区别这一问题，今天小编就抽空给大家介绍下Node环境和浏览器的区别，感兴趣的朋友一起看看吧2018-08-08
这篇文章主要介绍了ES6中Math对象新增的方法,结合实例形式详细分析了ES6中Math对象的各种常用数学函数与新增方法相关使用技巧,需要的朋友可以参考下2017-04-04
这篇文章主要为大家详细介绍了Openlayers实现图形绘制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
大家在做网站的时候，经常需要在input里面添加小图标功能，看似功能很简单，但是实现起来还是有点技巧的，下面小编给大家介绍下JS Input里添加小图标的两种方法，需要的朋友参考下吧2017-11-11
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
这篇文章主要介绍了js实现iframe框架取值的方法,可兼容IE,firefox,chrome等浏览器.涉及JavaScript针对框架元素取值的相关技巧,需要的朋友可以参考下2015-11-11
这篇文章主要介绍了微信小程序实现的picker多级联动功能,结合实例形式分析了微信小程序picker组件使用及wx.request后台交互相关操作技巧,需要的朋友可以参考下2019-05-05
最新评论