您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“怎么用JavaScript實(shí)現(xiàn)返回頂部按鈕”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
思路:
首先先設(shè)計(jì)出其靜態(tài)樣式,這里主要利用固定定位,將其固定在頁(yè)面底部的某一位置處
.backtotop { position: fixed; bottom: 80px; right: 80px; width: 80px; height: 80px; background-color: #ccc; font-size: 20px; text-align: center; padding-top: 12px; box-sizing: border-box; cursor: pointer; color: #000; /* 先隱藏按鈕 */ display: none; }
其次就是設(shè)計(jì)邏輯部分:當(dāng)鼠標(biāo)點(diǎn)擊“返回頂部”按鈕時(shí),則會(huì)以每20毫秒的周期以一定“速度”返回到頂部,回到頂部之后則要進(jìn)行清除,否則將出現(xiàn)只要一往下拉頁(yè)面就會(huì)自動(dòng)返回頂部的現(xiàn)象;在這里就要用到兩個(gè)方法一個(gè)是 setInterval,一個(gè)是clearInterval,前者是設(shè)置定時(shí)器,后者為清除定時(shí)器。
在這里要注意一點(diǎn)的是,為了不引起沖突,在設(shè)置定時(shí)器之前要進(jìn)行“設(shè)表先關(guān)”
最后為了增加用戶的體驗(yàn)感,我們需要設(shè)計(jì)成,當(dāng)前如果是在頂部時(shí),那么“返回頂部”按鈕就會(huì)自動(dòng)隱藏;當(dāng)前如果不在頂部時(shí),“返回頂部”按鈕就顯示
最后我們來(lái)看一下完整的案例:
<a href="javascript:;" class="backtotop" id="backtotop">返回<br>頂部</a>
a { text-decoration: none; } body { height: 5000px; } .backtotop { position: fixed; bottom: 80px; right: 80px; width: 80px; height: 80px; background-color: #ccc; font-size: 20px; text-align: center; padding-top: 12px; box-sizing: border-box; cursor: pointer; color: #000; /* 先隱藏按鈕 */ display: none; }
<script> (function(){ //獲得元素 var backtotop = document.getElementById('backtotop'); var timer; backtotop.onclick = function(){ //設(shè)表先關(guān),防止定時(shí)器沖突 clearInterval(timer); //設(shè)置定時(shí)器 timer = setInterval(function(){ // 更改根元素的scrollTop元素值 //兼容性問(wèn)題 var top = document.documentElement.scrollTop || document.body.scrollTop; top = top - 80; document.documentElement.scrollTop = top; document.body.scrollTop = top; //判斷 if(top <= 0) { //關(guān)閉定時(shí)器 clearInterval(timer); } },20); }; //監(jiān)聽頁(yè)面滾動(dòng) window.onscroll = function() { //得到卷動(dòng)值 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.scrollY; //當(dāng)頁(yè)面沒有卷動(dòng)時(shí),返回頂部 按鈕就隱藏 if(scrollTop == 0) { backtotop.style.display = 'none'; }else { backtotop.style.display = 'block'; } }; })(); <script>
當(dāng)頁(yè)面沒有發(fā)生卷動(dòng)時(shí):
當(dāng)頁(yè)面發(fā)生卷動(dòng)時(shí):
“怎么用JavaScript實(shí)現(xiàn)返回頂部按鈕”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。