回到頂部效果之加速置頂

時間 2019-11-06

原文原文鏈接

我在半年前接觸過相關案例，最近從新看了一下，添加了詳盡的註釋，但願對初學者能有所幫助。javascript

<!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/...
來源：慕課網
本文原創發佈於慕課網，轉載請註明出處，謝謝合做！css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。