回到顶部结果之加快置顶

2024年2月25日 180次阅读 来源: ZRC_Struggling

我在半年前打仗过相干案例，近来从新看了一下，增加了详实的解释，愿望对初学者能有所协助。

<!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/…
泉源：慕课网
本文原创宣布于慕课网 ，转载请说明出处，谢谢合作！

    原文作者：ZRC_Struggling
    原文地址: https://segmentfault.com/a/1190000007689397
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞