JavaScript實現回到頂部

HTML頁面使用一個a標簽，href內填寫JavaScript:;以阻止默認行為，在學習實例的時候添加一個大的div來充實頁面。

demo：

　　<a href="javascript:;" id="btn" title="回到頂部"></a>

　　其css代碼為：

#btn{
display: none;
position: fixed;
left: 90%;
bottom: 40px;
height:60px;
width: 60px;
background: url(img/22.ico) no-repeat left top;
background-size:100% auto;
border: solid 1px red;
border-radius: 5px;
}

補充幾句話：

CSS書寫順序

1.位置屬性(position, top, right, z-index, display, float等)

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align等)

4.背景(background, border等)

5.其他(animation, transition等)

 

給回到頂部一個美化，紅色邊框讓你更容易看到它。

 

JavaScript部分代碼：

window.onload = function(){
                //獲取相關
                var mybtn = document.getElementById("btn");
                var Time1 = null;
                var isTop = true;

                mybtn.onclick = function(){
                    //設置定時器
                    Time1 = setInterval(function(){
                        var osTop = document.body.scrollTop||document.documentElement.scrollTop;
                        //ceil向上取整，floor向下取整
                        var speed = Math.ceil(osTop/2);
                        //做一個變換速度的回到頂部效果
                        document.body.scrollTop = document.documentElement.scrollTop = osTop - speed;
                        if(osTop <= 0){
                            //清除定時器
                            clearInterval(Time1);
                        }
                        isTop = true ;
                    },100)
                }
                
                //頁面滾動自動觸發：
                window.onscroll = function(){
                    //獲取頁面可視區高度和滾動高度
                    var osTop = document.body.scrollTop||document.documentElement.scrollTop;
                    //這兩個獲取滾動的方法可以兼容多種瀏覽器
                    var clientHeight = document.documentElement.clientHeight;
                    //對回到頂部的隱藏和顯示，在css中一開始可以設置為隱藏
                    if (osTop>clientHeight) {
                        mybtn.style.display = "block"
                    }
                    else{
                        mybtn.style.display = "none"
                    }
                    if (!isTop) {
                        clearInterval(Time1);
                    }
                    isTop = false;
                }
            }

另外補充：

1、各瀏覽器下 scrollTop的差異 
IE6/7/8： 
對於沒有doctype聲明的頁面里可以使用  document.body.scrollTop 來獲取 scrollTop高度 ； 
對於有doctype聲明的頁面則可以使用 document.documentElement.scrollTop； 
Safari: 
safari 比較特別，有自己獲取scrollTop的函數 ： window.pageYOffset ； 
Firefox: 
火狐等等相對標准些的瀏覽器就省心多了，直接用 document.documentElement.scrollTop ； 
2、獲取scrollTop值 
完美的獲取scrollTop 賦值短語 ： 
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

通過這句賦值就能在任何情況下獲得scrollTop 值。 

 

最后說明：

　　本人學習來自百度搜索，祝大家利用好網絡搜索。