JS滾動到頂部踩坑解決記錄
正文
一般在比較長的頁面中會有一個滾動到頂部的按鈕,用戶點擊一下 300ms 內,會滾動到頂部,有動畫效果。
一開始我想,這不是很簡單,一行代碼完美解決
$(document.documentElement).animate({scrollTop: 0}, 300);
使用這個可以到頂部,但是沒有動畫,沒有采用
$(document.documentElement).scrollTop(0)
等到瞭手機上才發現,點擊居然沒有反應,才發現原來是我想的太簡單,一個滾動到頂部的按鈕竟然有這麼多兼容問題。
document.body
在 手機上能用,pc 上不能用
$(document.body).animate({scrollTop: 0}, 300); console.log(document.body.scrollTop) // 移動端有值,pc 為0
document.documentElement
在 PC 上能用,但手機上不能用
$(document.documentElement).animate({scrollTop: 0}, 300); console.log(document.documentElement.scrollTop) // pc端有值,移動端為0
也就是說 PC 端滾動的是document.documentElement
,在移動端滾動的是 document.body
如果沒有一個更好的 api,那麼就需要在分環境處理滾動元素,這樣顯的就有點麻煩。
這時候 document.scrollingElement
就出現,這個 api 就是為解決這個問題誕生的,通過 document.scrollingElement.tagName
可以看到在 PC 端是 html
在移動端是 body
。
在做解決問題的時候,搜索到一個 api
window.scrollTo({top: 0, behavior: "smooth"})
以為 js 良心發現,提供瞭一個這麼好用的 api,可以滾動到頂部,還有動畫,查看兼容性的時候, ios 居然不支持,害,果然就沒有好事情。
所以在遇到滾動到頂部時,document.scrollingElement
除瞭 IE 和 opera 和部分低版本瀏覽器不支持外,可以基本滿足需求。
以上就是JS滾動到頂部踩坑解決記錄的詳細內容,更多關於JS滾動到頂部的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- js實現控制整個頁面滾動條的位置
- vue頁面設置滾動失敗的完美解決方案(scrollTop一直為0)
- JavaScript實現返回頂部按鈕
- JavaScript實現樓層效果
- js中getBoundingClientRect( )方法案例詳解