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

以下是實現(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;//獲取頁面的可視窗口高度var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;//滾動條滾動時觸發(fā)window.onscroll = function(){//在滾動的時候增加判斷var osTop = document.documentElement.scrollTop || document.body.scrollTop;//特別注意這句，忘了的話很容易出錯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è)置定時器timer = setInterval(function(){//獲取滾動條距離頂部的高度var osTop = document.documentElement.scrollTop || document.body.scrollTop; //同時兼容了ie和Chrome瀏覽器//減小的速度var isSpeed = Math.floor(-osTop / 6);document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;//console.log( osTop + isSpeed);isTop = true;//判斷，然后清除定時器if (osTop == 0) {clearInterval(timer);}},30);};}</script>

總結(jié)

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

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