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实现根据函数名称字符串动态执行函数的方法,结合实例形式分析了JS函数名的判断及函数动态调用相关操作技巧,需要的朋友可以参考下2016-12-12
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
这篇文章主要介绍了BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
两种JavaScript的AES加密方式（可与Java相互加解密）
这篇文章主要介绍了两种JavaScript的AES加密方式（可与Java相互加解密） 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
这篇文章主要介绍了JS判断点是否在线段上的相关资料,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
这篇文章主要介绍了详解CocosCreator项目结构机制，只有了解这些机制后，才能更好的进行项目开发，避免潜在错误，并且快速的除错2021-04-04
这篇文章主要为大家详细介绍了js实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要介绍了js生成二维码的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-03
这篇文章主要介绍了javascript原始值和对象引用的方法,实例分析了javascript原始值和对象引用的功能、定义与相关技巧,需要的朋友可以参考下2015-04-04
编写更好的JavaScript条件式和匹配条件的技巧(小结)
这篇文章主要介绍了编写更好的JavaScript条件式和匹配条件的技巧(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要介绍了 JavaScript-定时器0~9抽奖系统，通过代码实例说明函数调用的整体操作，具体步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。2017-08-08
最新评论