效果圖

拉動滾動條時“回到頂部”按鈕位置不變(使用JS實現(xiàn))，點擊緩慢回到頂部

HTML部分–給足高度，出現(xiàn)滾動條

<h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><h1>一級標題</h1><div class="top" onclick="back()">回到頂部</div>

CSS

body {height: 3000px;}.top {position: absolute;line-height: 30px;padding: 0 10px;color: white;background: blueviolet;left: 200px;top: 100px;border: 5px double aqua;/* border: 5px; */}

JS部分

<script>var div=document.querySelector('.top');//按照class名獲取節(jié)點// console.log(div);var divTop=100;//設置初始高度為100,與css中值相等//定義一個空值來接受定時器var times;//定義窗口滾動事件window.onscroll=function(){//獲取距上方的距離var t= document.documentElement.scrollTop;// console.log(t);//設置div與上方距離為初始高度+距上方距離，保證div在頁面中位置固定div.style.top=divTop+t+"px";}//按鈕單擊調(diào)用函數(shù)function back(){//每次點擊清空一次定時器，避免產(chǎn)生多個定時器，導致無法清空clearInterval(times);//設置定時器times=setInterval(function(){//每次執(zhí)行獲取一次距上方的高度var Top=document.documentElement.scrollTop;if(Top<0){//如果距上方距離小于0，也就是說已經(jīng)到達頂部clearInterval(times);//清空定時器}else{//如果距上方距離不小于0，也就是說還沒到達頂部//設置據(jù)上方距離比上一次的距離小20document.documentElement.scrollTop=Top-20;}},100);}</script>

總結(jié)

以上是生活随笔為你收集整理的【JS】顶部悬浮及缓慢回到顶部的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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