js監聽捲軸 回到頂端

標籤：style   blog   io   ar   color   os   sp   java   on   

效果：當出現捲軸，且捲軸出現移動時，把回到頂端按鈕 顯示出來；當捲軸回到頂部時，將回到頂端按鈕隱藏。

    <script type="text/javascript">　　　　　//擷取捲軸的位置        function getScrollTop() {            var scrollPos;            if (window.pageYOffset)            {                scrollPos = window.pageYOffset;            }            else if (document.compatMode && document.compatMode != ‘BackCompat‘)            {                scrollPos = document.documentElement.scrollTop;            }            else if (document.body)            {                scrollPos = document.body.scrollTop;            }            return scrollPos;        }        window.onscroll = function () {//監聽捲軸            if (getScrollTop() > 20) {//當捲軸離開頂端時，顯示"回到頂部"。這裡寫20的原因是，"回到頂端"按鈕也不是需要馬上出現，根據自己的需求 而設定。                $("#top_div").show();            }            else {//當捲軸回到頂端時，將"回到頂端按鈕"  隱藏                $("#top_div").hide();            }        }    </script><style type="text/css"> #top_div{     position:fixed;     bottom:280px;     left:0;     display:none; } </style> 

小記。。。

 

js監聽捲軸 回到頂端