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