这几种方法帮你快速实现回到页面顶部
生活随笔
收集整理的這篇文章主要介紹了
这几种方法帮你快速实现回到页面顶部
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
🚀 優質資源分享 🚀
| 🧡 Python實戰微信訂餐小程序 🧡 | 進階級 | 本課程是python flask+微信小程序的完美結合，從項目搭建到騰訊云部署上線，打造一個全棧訂餐系統。 |
| 💛Python量化交易實戰💛 | 入門級 | 手把手帶你打造一個易擴展、更安全、效率更高的量化交易系統 |
背景介紹
當頁面內容很多的時候，用戶可能會一直往下滑動頁面。但是當他想返回頁面頂部進行其他操作時，他可能需要不斷滾動鼠標滾輪，這就導致用戶體驗將很差。鑒于這種情況， “回到頂部”這一功能便出現了。
如今在我們瀏覽網站的時候，常常能遇見“回到頂部”這個按鈕。目前主流的回到頁面頂部分表現為兩種，一種是直接回到頁面的頂部，這種方式簡單粗暴；另外一種則是自動滾動間接回到頁面頂部，這樣一來視覺體驗上可能更好，但是用戶需要過幾秒才能看到頂部內容。
例如掘金，在滾動到一定高度時會出現“回到頂部”按鈕，點擊后會直接回到頁面頂部，就是上文說到的第一種情況。
實現
動態顯示滾動按鈕
“回到頂部”并不是一直顯示的，而是滾動到一定值才出現的，因此應該在window.onscroll里定義一個判斷事件。
window.onscroll = function () {var currentHeight =document.documentElement.scrollTop ||window.pageYOffset ||document.body.scrollTop;// 頁面滾動超過300px就顯示if (currentHeight > 300) {document.getElementById('backtop').style.display = 'block'} else {document.getElementById('backtop').style.display = 'none'} }直接回到頂部
錨點
最簡單的方法。給頂部的div一個id，點擊直接回到這個div元素，但是URL上會出現#top。
<div id="top">div> ...... <a href="#top">回到頂部a>scrollTo函數
控制滾動條回到指定位置，第一個參數是距離頁面左端的距離，第二個參數是距離頁面頂部的距離。
<a href="javascript:scrollTo(0, 0)">回到頂部a>scrollTop函數
控制滾動條垂直偏移。
"byScrollTop()">回到頂部 ...... function byScrollTop() {document.documentElement.scrollTop = 0;window.pageYOffset = 0; // 兼容iosdocument.body.scrollTop = 0; // 兼容低版本ie }scrollBy函數
該方法可把內容滾動指定的像素數。第一個參數指向右滾動的像素，第二個參數指向下滾動的參數，負數可使方向相反。
"byScrollBy()">回到頂部 ...... function byScrollBy() {var topHeight =document.documentElement.scrollTop ||window.pageYOffset ||document.body.scrollTop;scrollBy(0, -topHeight); }間接回到頂部
定時器實現滾動動畫
通過定時器實現固定速度的自動滾動動畫效果。但是這樣會有個問題，就是當頁面內容十分多的時候，這個時候離頂部已經有很長一段距離了。如果還是一個固定速度的話，可能會長達10秒鐘，這對用戶體驗來說是不友好的。
"scrollToTop()">回到頂部 ...... function scrollToTop() {var topHeight =document.documentElement.scrollTop ||window.pageYOffset ||document.body.scrollTop;scrollBy(0, -100);// 模擬鼠標向上滾動事件scrolldelay = setTimeout('scrollToTop()', 50);// 清除滾動事件，避免無法向下移動if (topHeight === 0) {clearTimeout(scrolldelay);scrolldelay = null;} }定時器實現滾動動畫-改良版
基于上面這個問題，我們可以設置一個速度的最小值，讓滾動速度從快到慢，但也不至于過慢。
function scrollToTop() {var topHeight =document.documentElement.scrollTop ||window.pageYOffset ||document.body.scrollTop;var speed = topHeight / 10 > 100 ? topHeight / 10 : 100;scrollBy(0, -speed);// 模擬鼠標向上滾動事件scrolldelay = setTimeout('scrollToTop()', 50);// 清除滾動事件，避免無法向下移動if (topHeight === 0) {clearTimeout(scrolldelay);scrolldelay = null;} }最終效果
完整代碼
<style>a {display: block;}#top {height: 2000px;background-color: #999}#backtop {display: none;position: fixed;bottom: 20px;right: 30px;background-color: #fff;z-index: 9;} style><body><div id="top">這里是頁面頂部div><div id="backtop"><a href="#top">回到頂部-錨點a><a href="javascript:scrollTo(0, 0)">回到頂部-scrollTo函數a><a onclick="byScrollTop()">回到頂部-scrollTop函數a><a onclick="byScrollBy()">回到頂部-scrollBy函數a><a onclick="scrollToTop()">回到頂部-定時器動畫版a>div><script>window.onscroll = function () {var currentHeight =document.documentElement.scrollTop ||window.pageYOffset ||document.body.scrollTop;console.log(currentHeight, "currentHeight");if (currentHeight > 300) {document.getElementById('backtop').style.display = 'block'} else {document.getElementById('backtop').style.display = 'none'}}function byScrollTop() {document.documentElement.scrollTop = 0;window.pageYOffset = 0; // 兼容iosdocument.body.scrollTop = 0; // 兼容低版本ie}function byScrollBy() {var topHeight =document.documentElement.scrollTop ||window.pageYOffset ||document.body.scrollTop;scrollBy(0, -topHeight);}function scrollToTop() {var topHeight =document.documentElement.scrollTop ||window.pageYOffset ||document.body.scrollTop;var speed = topHeight / 10 > 100 ? topHeight / 10 : 100;scrollBy(0, -speed);// 模擬鼠標向上滾動事件scrolldelay = setTimeout('scrollToTop()', 50);// 清除滾動事件，避免無法向下移動if (topHeight === 0) {clearTimeout(scrolldelay);scrolldelay = null;}}script> body>總結
以上是生活随笔為你收集整理的这几种方法帮你快速实现回到页面顶部的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 8个优秀的CSS实践，再不刷题就晚了！
- 下一篇： c语言dnf脚本源码,dnf纯脚本源码贝