回到顶部效果之加速置顶

我在半年前接触过相关案例，最近重新看了一下，添加了详尽的注释，希望对初学者能有所帮助。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>加速回到顶部</title>
<style type="text/css">
*{margin: 0;padding: 0;
}
.container{width:900px; overflow: hidden;margin:0 auto; }
#backToTop {width:40px;height:40px;position:fixed;left:50%;   /* 将其左上角置于容器的水平方向上的中点 */margin-left:450px;  /* 向右移动图片容器的宽度的一半，以实现其左侧贴紧图片的边线的效果 */bottom:0; background:url(http://img.mukewang.com/583ac6bb00010e9c00400080.png) no-repeat 0 0;display:none;   /*将按钮隐藏*/transition:all 0.5s ease;   /* 增加过渡效果 */}/*鼠标悬浮时改变样式*/
#backToTop:hover {bottom:14px;background-position: 0 -40px;}</style>
</head><body><div class="container"><img alt="..." src="http://img.mukewang.com/583ac6d30001a4ad13253338.png" /></div><!-- 此处设置href的值的是为了阻止其回到顶部的默认行为。 --><a href="javascript:;" id="backToTop" title="回到顶部"></a><script type="text/javascript">window.onload = function () {var backToTop = document.getElementById("backToTop");//获取用于设置回到顶部功能的按钮var clientHeight =  document.documentElement.clientHeight;//获取可视区的高度var speed;    /*声明控制滚动速度的变量*/// 添加全局的滚动事件window.onscroll = function () {//获取滚动条到顶部的距离，即滚动条滚动了的距离var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;//若滚动条到顶部的距离大于可视区的高度，即滚动的距离超过一屏，则显示按钮,反之，则隐藏。backToTop.style.display = (scrollTop>clientHeight)?"block":"none";}//实现加速滚动的函数function scrollToTop() {var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;if(scrollTop>0){//将滚动条向上移动document.documentElement.scrollTop = document.body.scrollTop = scrollTop - speed; speed += 4;   //增加步长，以实现加速滚动的效果setTimeout(scrollToTop,40); //每隔40ms，滚动一次}}//为按钮绑定单击事件backToTop.onclick = function () {speed = 10; //设置步长的初值scrollToTop();  //开始滚动}}</script>
<!--     attentions:1.问题：Chrome浏览器、Safari浏览器、opera浏览器不支持document.documentElement.scrollTop,只支持document.body.scrollTop;而IE和Firefox都只支持document.documentElement.scrollTop，而不支持document.body.scrollTop解决方案：通过  ||  操作符提供后备值。2.步长speed的初始化不能放到其声明的位置，而应该放到用于回到顶部的按钮上的单击事件里，当再次触发单击事件时，将其值还原到初始状态。3.不要因为该语句（var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;）出现重复而将其转移到外层以实现复用，那是错误的。如果转移到了最外层，scrollTop将无法获取到更新后的值-->
</body>
</html>

作者：人生还有多少个二十年
链接：http://www.imooc.com/article/...
来源：慕课网
本文原创发布于慕课网，转载请注明出处，谢谢合作！

回到顶部效果之加速置顶相关推荐

页面滚动事件和利用JS实现回到顶部效果
页面滚动事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
用Javascript实现回到顶部效果
用Javascript实现回到顶部效果经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...
php 回到顶部,jquery如何实现点击网页回到顶部效果？（图文+视频）
本篇文章主要给大家介绍如何用jquery代码实现网页回到顶部的效果. 我们在浏览各大网站页面时,想必大家肯定都遇到过,当阅览一个长页面时,拉到下面部分会出现类似回到顶部的按钮特效吧. 这种点击回到顶部 ...
vue 回到顶部效果
最终效果: 回到顶部按钮 BackToTop.vue组件: <template><transition :name="transitionName">< ...
如何利用原生JS实现回到顶部以及吸顶效果
<style>.box1{width: 1200px;height: 800px;background-color: pink;margin: 0 auto;}.box2{width: 1 ...
js——页面回到顶部
很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子--页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享-- <!DOCTYPE html&g ...
基于Vue项目的回到顶部插件
在形目中经常要实现回到顶部的效果,所以我在这做了一个回到顶部的插件. 首先,我们先在这说明一下,实现回到顶部的效果所要满足的要求为:要实现回到顶部效果的盒子必须出现横向滚动条. 子组件如下所示: 原理 ...
使用scrollTop回到顶部时间
锚链接使用锚链接方式实现回到顶部效果,是最简便的一种方式,即将标签a中的href属性值设置为#即可:,便可实现一键回到顶部效果.为了提供较好的用户体验,这里使用js实现这个功能. 功能点 1.返回顶 ...
android 点击返回顶部,Android scrollToTop实现点击回到顶部（兼容PullTorefreshScrollview）...
前言最近因为项目组需求,特研究了一下"回到顶部"效果,即:页面里有scrollview,内容很多,当滑动到页面下面或者更深时,需要回到顶部,即可点击出现的按钮,省得回滑N久.我没 ...

回到顶部效果之加速置顶

回到顶部效果之加速置顶相关推荐

最新文章

热门文章