基于JavaScript實現(xiàn)回到頁面頂部動畫代碼
更新時間：2016年05月24日 13:46:42 作者：daisykoo
這篇文章主要介紹了基于JavaScript實現(xiàn)回到頁面頂部動畫代碼的相關(guān)資料,代碼簡單易用，非常實用，需要的朋友可以參考下
最近做的都是前端的項目，很多項目都有回到頂部的需求，下面把我寫js代碼做個筆錄，方便以后查找。
發(fā)現(xiàn)還可以添加從快到慢的動畫效果和隨時下拉滾動條停止?jié)L動的功能， 參考了imooc上相關(guān)課程，最終實現(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;
//到達頂部，清除定時器
if (osTop == 0) {
clearInterval(timer);
};
isTop = true;
},30);
};
};
以上內(nèi)容是小編給大家介紹的基于JavaScript實現(xiàn)回到頁面頂部動畫代碼，代碼簡單易懂，所有沒給大家附太多的注釋，如果大家在參考過程中發(fā)現(xiàn)有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
本文給大家分享了view.post()方法不靠譜的地方，以及post在7.0中的差異，需要的的朋友參考下本文吧2017-08-08
當(dāng)某個文本框成為焦點時即清除文本框內(nèi)容
這篇文章主要介紹了當(dāng)某個文本框成為焦點時如何清除文本框內(nèi)容,需要的朋友可以參考下2014-04-04
開始接觸這門語言時，可能都會覺得這門語言缺少訪問控制符(如public、private、protected)，從而導(dǎo)致不能定義私有變量和私有方法。但經(jīng)過進一步了解就會知道javascript同樣可以有私有變量。2010-02-02
js中g(shù)etBoundingClientRect的作用及兼容方案詳解
這篇文章主要介紹了js中g(shù)etBoundingClientRect的作用及兼容方案詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
jQuery實現(xiàn)可收縮展開的級聯(lián)菜單實例代碼
這篇文章主要是對利用jQuery實現(xiàn)可收縮展開的級聯(lián)菜單的實例代碼進行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
仿Excel表格演示代碼，非常不錯。2009-06-06
給網(wǎng)頁加個彩色窗口...2006-07-07
Blog的插入HTML功能有誤。 原來在blueidea.com上看到了用ASP執(zhí)行解壓縮動作的文章，一直沒有去用心看，前日，趁老大不在，爽了一把，把它改成了用JavaScript操作的了。2008-04-04
JavaScript null和undefined區(qū)別分析
在JavaScript開發(fā)中，被人問到：null與undefined到底有啥區(qū)別？2009-10-10
這篇文章主要為大家介紹了從Immutable.js到Redux函數(shù)式編程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04