基于JavaScript實(shí)現(xiàn)回到頁面頂部動畫代碼

    這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)回到頁面頂部動畫代碼的相關(guān)資料,代碼簡單易用，非常實(shí)用，需要的朋友可以參考下
    最近做的都是前端的項(xiàng)目，很多項(xiàng)目都有回到頂部的需求，下面把我寫js代碼做個筆錄，方便以后查找。
    發(fā)現(xiàn)還可以添加從快到慢的動畫效果和隨時下拉滾動條停止?jié)L動的功能， 參考了imooc上相關(guān)課程，最終實(shí)現(xiàn)JS代碼如下：
    //頁面加載后觸發(fā)
    window.onload = function(){
    var btn = document.getElementById('btn');
    var timer = null;
    var isTop = true;
    //獲取頁面可視區(qū)高度
    var clientHeight = document.documentElement.clientHeight;
    //滾動條滾動時觸發(fā)
    window.onscroll = function() {
    //顯示回到頂部按鈕
    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (osTop >= clientHeight) {
    btn.style.display = "block";
    } else {
    btn.style.display = "none";
    };
    //回到頂部過程中用戶滾動滾動條，停止定時器
    if (!isTop) {
    clearInterval(timer);
    };
    isTop = false;
    };
    btn.onclick = function() {
    //設(shè)置定時器
    timer = setInterval(function(){
    //獲取滾動條距離頂部高度
    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
    var ispeed = Math.floor(-osTop / 7);
    document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;
    //到達(dá)頂部，清除定時器
    if (osTop == 0) {
    clearInterval(timer);
    };
    isTop = true;
    },30);
    };
    };
    以上內(nèi)容是小編給大家介紹的基于JavaScript實(shí)現(xiàn)回到頁面頂部動畫代碼，代碼簡單易懂，所有沒給大家附太多的注釋