web的幾種返回頂部

標籤：ack   span   back   dex   otto   jquery   enter   function   center   

回到頂部backtoTop 滾動回到頂部 jquery/js效果還不錯！支援現代瀏覽器包括 ie6。position: absolute;和fixed.兩種方法！

一，jQuery方法的backtoTop：

　　CSS：

        .backtoTop1 {            height: 100px;            width: 100px;            /* 固定定位 */            position: fixed;             padding-top: 8px;            right: 0;            bottom: 0;            display: none;            z-index: 9999;            background: red;        }

　　JavaScript：

            //滾動時觸發            $(window).scroll(function() {                //擷取捲軸到頂部的垂直高度                var sc = $(window).scrollTop();                if(sc > 0) {                    $("#backtoTop1").stop().show();                } else {                    $("#backtoTop1").stop().hide();                }            });            $("#backtoTop1").click(function() {                $(‘body,html‘).animate({                    scrollTop: 0                });            });

 

二，js方法的backtoTop：

　　CSS：

        .backtoTop2 {            height: 100px;            width: 100px;            position: fixed; //固定定位            padding-top: 8px;            right: 200px;            bottom: 0;            display: none;            z-index: 9999;            background: red;            cursor: pointer;            text-align: center;            color: #fff;            line-height: 100px;        }

　　JavaScript：

            // 給window註冊滾動監聽事件            window.onscroll = function(){                // 擷取返回頂部的按鈕                var toTop = document.getElementById(‘backToTop2‘);                // 擷取捲軸距離頁面頂部的距離                var topH = document.documentElement.scrollTop || document.body.scrollTop;                // 判斷當捲軸距離頁面頂部300px時顯示出來                if (topH > 300) {                    toTop.style.display = ‘block‘;                } else {                    toTop.style.display = ‘none‘;                }                // 給返回頂部的按鈕註冊一個點擊事件                toTop.onclick = function(){                    // 頁面滾動到left：0和top：0的位置；                    window.scrollTo(0, 0);                }            }

 以上方法僅供參考？

 

web的幾種返回頂部