回到頂部效果之加速置頂

ZRC_Struggling發表於2019-02-16

我在半年前接觸過相關案例，最近重新看了一下，新增了詳盡的註釋，希望對初學者能有所幫助。

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

相關文章