問(wèn)題描述
適用范圍：所有前端界面，返回頂部按鈕
兼容：ie 9 以上

以下是實(shí)現(xiàn)功能的代碼：

<div style="position: fixed; width: 40px; height: 40px; background: rgb(0, 0, 0); cursor: pointer; bottom: 202px; right: 100px; border-radius: 10px; display: none;" id="goup-container"><div class="goup-arrow" style="width: 0px; height: 0px; margin: 0px auto; padding-top: 13px; border-style: solid; border-width: 0px 10px 10px; border-color: transparent transparent rgb(255, 255, 255);"></div> </div> <script>//回到頂部按鈕window.onload = function() {var top_btn = document.getElementById('goup-container');var timer = null;var isTop = true;//獲取頁(yè)面的可視窗口高度var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;//滾動(dòng)條滾動(dòng)時(shí)觸發(fā)window.onscroll = function(){//在滾動(dòng)的時(shí)候增加判斷var osTop = document.documentElement.scrollTop || document.body.scrollTop;//特別注意這句，忘了的話(huà)很容易出錯(cuò)if (osTop >= clientHeight*0.15) {top_btn.style.display = 'block';}else{top_btn.style.display = 'none';}if (!isTop) {clearInterval(timer);}isTop = false;};top_btn.onclick = function(){//設(shè)置定時(shí)器timer = setInterval(function(){//獲取滾動(dòng)條距離頂部的高度var osTop = document.documentElement.scrollTop || document.body.scrollTop; //同時(shí)兼容了ie和Chrome瀏覽器//減小的速度var isSpeed = Math.floor(-osTop / 6);document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;//console.log( osTop + isSpeed);isTop = true;//判斷，然后清除定時(shí)器if (osTop == 0) {clearInterval(timer);}},30);};}</script>

總結(jié)

以上是生活随笔為你收集整理的js原生实现过渡效果的返回顶部功能实例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。