首页手记 javascript实现回到顶部效果

javascript实现回到顶部效果

标签：

Html/CSS JavaScript

```本文根据慕课网视频制作：

如果要做一些内容比较多的网站，前端的显示内容会很多，如果不加以设计，会使得用户使用很麻烦，像上次的PHP分页，是为了将部分内容展示到前端，而当一页内容过多时我们就需要实现一个javascript回到顶部的样式设计。

设计知识点也比较基础：

JS中的DOM操作：
document.getElementById//获取元素标签
document.documentElement.scrollTop//滚动条的数值

事件操作：
window.onload//页面加载
onclick//点击触发
window.onscroll//滚动条触发

定时器
setInterval()
clearIntervar()

在实现动画效果之前呢，需要先进行html+css搭建，本课程采用的是淘宝的页面，其实用什么无所谓，关键是——长度要够长！

<body>
<div class="box">
        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="xxxx.jpg />
    </div>
    <a href="javascript:;" id="btn" title="回到顶部"></a>
</body>//多余的就不说了，这里直接说关键的部分，其实就是一个div~~~
/*CSS样式也很简单
要注意的是我们的回到顶部按钮固定定位状态，以及点击与未点击的两个样式，还有按钮的显示与隐藏
*/
<style  type="text/css">
#btn {
width:40px; height:40px; position:fixed; right:65px; bottom:10px; display:none; background:url(images/top_bg.png) no-repeat left top;
}
#btn:hover {
background:url(images/top_bg.png) no-repeat 0 -39px;
}
.bg {width:1190px; margin:0 auto;}
</style>

接下来是我们的JS部分，在这里我只总结一下关键的~~

1.获取页面可视区的高度
clientHeight=document.documentElement.clientHeight;
2.获取滚动条距离顶部的高度
 osTop=document.documentElement.scrollTop||document.body.scrollTop;
/*这样写是因为浏览器的兼容问题
其中
IE识别document.documentElement.scrollTop
谷歌识别document.body.scrollTop*/
3.定时器的设定
setInterval中传入function: osTop不断的加上一个ispeed值最后判断osTop
其中 var ispeed = Math.floor(-osTop / 6);//可以实现由快到慢回到顶部
如果osTop==0了的话说明已经回到顶部就要使用clearInterval来清除定时器

最后~~想看完整版的点击这里~
http://t.imooc.com/learn/65

点击查看更多内容