js實現返回頂部功能的解決方案

2021-08-03 03:38:02 字數 1024 閱讀 8296



很多**上都有返回頂部的效果，主要有如下幾種解決方案。 

window.scrollto(x-coord, y-coord);

window.scrollto(0,0);
生硬版： 

var scrolltotop = window.setinterval(function


() else


}, 16); //


how fast to scroll (this equals roughly 60 fps)
流暢版： 

(function


smoothscroll()


})();
首先需要在頂部新增如下html元素：

<


span 


style


="font-size:14px"


><


p id


="back-to-top"


><


a href


="#top"


><


span


>


span


>返回頂部


a>


p>


span


>
其中a標籤指向錨點top，可以在頂部防止乙個的錨點，這樣在瀏覽器不支援js時也可以實現返回頂部的效果了。

p#back-to-top


p#back-to-top a


p#back-to-top a:hover


p#back-to-top a span


#back-to-top a:hover span


有了html和樣式，我們還需要用js控制返回頂部按鈕，在頁面滾動時漸隱漸現返回頂部按鈕。


這樣就可以了。


注意在載入頁面後需要向下拖動一點滾動條才可以看到返回頂部的效果圖。




 
原生JS實現返回頂部功能
當你點選 返回頂部 按鈕，頁面會自動滾動到頂部，這種做法被許多 採用 之前我用jquery實現了返回頂部功能 見jquery實現鏈結 並在許多專案中使用了這個jquery版本實現。但最近我將注意力轉向了 效能方面，試圖提高頁面的載入速度。其中最大的改進便是移除了jquery依賴改用原生js實現 返回...


wordpress頂部空白解決方案
最近在搗鼓wordpress主題，發現頂部莫名其妙的多出一條空白框，導致頁面的效果變的優點差，於是嘗試去除。導致wordpress頁面出現空白框的原因大概有兩點 一，utf 8即檔案儲存型別 檔案儲存型別與使用版本之間如果不同，會導致上述問題。另存為對應的檔案型別。二，admin bar admin...


使用jQuery實現返回頂部功能
p id back to top a href top span span 返回頂部 a p 其中a標籤指向錨點top，可以在頂部防止乙個的錨點，這樣在瀏覽器不支援js時也可以實現返回頂部的效果了。returntop p back to topp back to top ap back to top...