js實現點選回到頂部

html部分

<div class="returnTop" id="btn">
        <i class="aui-iconfont aui-icon-top"></i>
 </div>

css部分

.returnTop {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: fixed;
    right: 0.75rem;
    bottom: 10%;
    background: #03a9f4;
    text-align: center;
    line-height: 60px;
}
.returnTop i {
    color: #fff;
    font-weight: bold;
    font-size: 1.5rem;
}
#btn{
	display:none;
}

js部分

// 返回頂部
        var obtn = document.getElementById('btn');
        var timer = null;
        var isTop = true;
        //獲取頁面的可視視窗高度
        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //滾動條滾動時觸發
        window.onscroll = function(){
            //在滾動的時候增加判斷
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;//特別注意這句，忘了的話很容易出錯
            if (osTop == 0) {
                obtn.style.display = 'none';
            }else{
                obtn.style.display = 'block';
            }
            if (!isTop) {
                clearInterval(timer);
            }
            isTop = false;
        };
        btn.onclick = function(){
            //設定定時器
            timer = setInterval(function(){
                //獲取滾動條距離頂部的高度
                var osTop = document.documentElement.scrollTop || document.body.scrollTop;  //同時相容了ie和Chrome瀏覽器
                //減小的速度
                var isSpeed = Math.floor(-osTop / 6);
                document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;
                //console.log( osTop + isSpeed);
                isTop = true;
                //判斷，然後清除定時器
                if (osTop == 0) {
                    clearInterval(timer);
                }
            },30);  
        };