JavaScript實(shí)現(xiàn)返回頂部按鈕案例
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)返回頂部按鈕的具體代碼,供大家參考,具體內(nèi)容如下
思路:
首先先設(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)”
最后為了增加用戶(hù)的體驗(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)聽(tīng)頁(yè)面滾動(dòng) window.onscroll = function() { //得到卷動(dòng)值 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.scrollY; //當(dāng)頁(yè)面沒(méi)有卷動(dòng)時(shí),返回頂部 按鈕就隱藏 if(scrollTop == 0) { backtotop.style.display = 'none'; }else { backtotop.style.display = 'block'; } }; })(); <script>
當(dāng)頁(yè)面沒(méi)有發(fā)生卷動(dòng)時(shí):
當(dāng)頁(yè)面發(fā)生卷動(dòng)時(shí):
最后感興趣的小伙伴可以親自動(dòng)手去試試!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript 監(jiān)控微信瀏覽器且自帶返回按鈕時(shí)間
- 基于Javascript實(shí)現(xiàn)返回頂部按鈕
- javascript返回頂部的按鈕實(shí)現(xiàn)方法
- javascript中返回頂部按鈕的實(shí)現(xiàn)
- JavaScript阻止瀏覽器返回按鈕的方法
- javascript實(shí)現(xiàn)博客園頁(yè)面右下角返回頂部按鈕
- JS返回上一頁(yè)實(shí)例代碼通過(guò)圖片和按鈕分別實(shí)現(xiàn)
- js 點(diǎn)擊按鈕彈出另一頁(yè),選擇值后,返回到當(dāng)前頁(yè)
- JavaScript 彈出窗體點(diǎn)擊按鈕返回選擇數(shù)據(jù)的實(shí)現(xiàn)
- JavaScript實(shí)現(xiàn)返回頂部按鈕
相關(guān)文章
javascript的23種設(shè)計(jì)模式示例總結(jié)大全
這篇文章主要為大家介紹了javascript的23種設(shè)計(jì)模式的總結(jié)大全,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06Bootstrap基本插件學(xué)習(xí)筆記之Tooltip提示工具(18)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之oltip提示工具的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12javascript設(shè)計(jì)模式 – 中介者模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 中介者模式,結(jié)合實(shí)例形式分析了javascript中介者模式基本概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-042020淘寶618理想生活列車(chē)自動(dòng)領(lǐng)喵幣js腳本的代碼
這篇文章主要介紹了2020淘寶618理想生活列車(chē)自動(dòng)領(lǐng)喵幣腳本,需要先安裝 auto.js腳本,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06JavaScript實(shí)現(xiàn)隨機(jī)替換圖片的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)隨機(jī)替換圖片的方法,涉及javascript中Math.random方法的靈活運(yùn)用,需要的朋友可以參考下2015-04-042016年最熱門(mén)的15 款代碼語(yǔ)法高亮工具,美化你的代碼
無(wú)論是代碼高亮還是語(yǔ)法高亮對(duì)整個(gè)程序來(lái)說(shuō)都非常重要,可以給人眼前一亮的感覺(jué),增加用戶(hù)體驗(yàn)度,下面通過(guò)本文給大家介紹2016年最熱門(mén)的Javascript代碼高亮顯示腳本及代碼語(yǔ)法高亮工具,對(duì)js代碼高亮,代碼語(yǔ)法高亮相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01