js?scrollTop如何到達指定位置
更新時間：2022年10月25日 15:19:37 作者：十三把刀丶
很早之前就想分享這篇心得，幸之今天能在這里完成，好了，話不多說，進入正題。如有錯誤或未考慮完全的地方，望不吝賜教
js scrollTop到達指定位置
方法主要利用scrolltop值做運動， 用于到達用戶指定的位置（如返回頂部把參數(shù)target設(shè)置為0即可），處理了多種情況如 scrolltop > 目標值 向上運動 ，等4種情況 ， 代碼及用法貼上
goTo = function(target){
? ? var scrollT = document.body.scrollTop|| document.documentElement.scrollTop
? ? if (scrollT >target) {
? ? ? ? var timer = setInterval(function(){
? ? ? ? ? ? var scrollT = document.body.scrollTop|| document.documentElement.scrollTop
? ? ? ? ? ? var step = Math.floor(-scrollT/6);
? ? ? ? ? ? document.documentElement.scrollTop = document.body.scrollTop = step + scrollT;
? ? ? ? ? ? if(scrollT <= target){
? ? ? ? ? ? ? ? document.body.scrollTop = document.documentElement.scrollTop = target;
? ? ? ? ? ? ? ? clearTimeout(timer);
? ? ? ? ? ? }
? ? ? ? },20)
? ? }else if(scrollT == 0){
? ? ? ? var timer = setInterval(function(){
? ? ? ? ? ? var scrollT = document.body.scrollTop|| document.documentElement.scrollTop
? ? ? ? ? ? var step = Math.floor(300/3*0.7);
? ? ? ? ? ? document.documentElement.scrollTop = document.body.scrollTop = step + scrollT;
? ? ? ? ? ? console.log(scrollT)
? ? ? ? ? ? if(scrollT >= target){
? ? ? ? ? ? ? ? document.body.scrollTop = document.documentElement.scrollTop = target;
? ? ? ? ? ? ? ? clearTimeout(timer);
? ? ? ? ? ? }
? ? ? ? },20)
? ? }else if(scrollT < target){
? ? ? ? var timer = setInterval(function(){
? ? ? ? ? ? var scrollT = document.body.scrollTop|| document.documentElement.scrollTop
? ? ? ? ? ? var step = Math.floor(scrollT/6);
? ? ? ? ? ? document.documentElement.scrollTop = document.body.scrollTop = step + scrollT;
? ? ? ? ? ? if(scrollT >= target){
? ? ? ? ? ? ? ? document.body.scrollTop = document.documentElement.scrollTop = target;
? ? ? ? ? ? ? ? clearTimeout(timer);
? ? ? ? ? ? }
? ? ? ? },20)
? ? }else if(target == scrollT){
? ? ? ? return false;
? ? }
}用法 function(target) / / 目前唯一target（目標距離number） ，
on(goPs,'click',function(){ goTo(2450) }); //運動到scrolltop值為2450地位置，下面也一樣， 運動到指定的位置?
on(goJob,'click',function(){ goTo(3373) })on(goTel,'click',function(){ buffer.goTo(3373) })；
on(goMe,'click',function(){ buffer.goTo(1539) })on(goHome,'click',function(){ buffer.goTo(0) });
on(scrollgoOne,'click',function(){ buffer.goTo(2450) });on(scrollgoPc,'click',function(){ buffer.goTo(2450) });
on(scrollJob,'click',function(){ buffer.goTo(3373) });on(scrollMe,'click',function(){ buffer.goTo(1539) });
on(goTop,'click',function(){ buffer.goTo(0) })原生js獲取scrollTop
1、各瀏覽器下 scrollTop的差異
IE6/7/8：
- 對于沒有doctype聲明的頁面里可以使用 document.body.scrollTop 來獲取 scrollTop高度 ；
- 對于有doctype聲明的頁面則可以使用 document.documentElement.scrollTop；
Safari：
- safari 比較特別，有自己獲取scrollTop的函數(shù) ： window.pageYOffset ；
Firefox：
- 火狐等等相對標準些的瀏覽器就省心多了，直接用 document.documentElement.scrollTop ；
2、獲取scrollTop值
完美的獲取scrollTop 賦值短語 ：
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
通過這句賦值就能在任何情況下獲得scrollTop 值。
仔細觀察這句賦值，你發(fā)現(xiàn)啥了沒？？
沒錯， 就是 window.pageYOffset (Safari) 被放置在 || 的中間位置。
因為當 數(shù)字0 與 undefine 進行 或運算時，系統(tǒng)默認返回最后一個值。即或運算中 0 == undefine ;
當頁面滾動條剛好在最頂端，即scrollTop值為 0 時。 IE 下 window.pageYOffset (Safari) 返回為 undefine ，此時將window.pageYOffset (Safari) 放在或運算最后面時， scrollTop 返回 undefine , undefine 用在接下去的運算就會報錯咯。
而其他瀏覽器 無論 scrollTop 賦值或運算順序如何都不會返回 undefine. 可以安全使用..
所以說到頭還是IE的問題咯. 杯具…
精神有點恍惚，不知道有沒有表達清楚。
不過最后總結(jié)出來這句實驗過OK，大家放心使用；
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
對于js中的對象的深拷貝在項目的開發(fā)中比較常用到,本文就來介紹一下JS深拷貝的4種實現(xiàn)方法,具有一定的參考價值,感興趣的可以了解一下2023-10-10
都知道在js中如果定義兩個相同名稱的方法，前一個方法就會被后一個方法覆蓋掉，使用此特點就可以實現(xiàn)模板方法，感興趣的朋友可以了解下本文哈2013-07-07
這篇文章主要介紹了JS實現(xiàn)網(wǎng)站樓層導航效果代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了ECMAScript6塊級作用域及新變量聲明（let） 的相關(guān)資料,需要的朋友可以參考下2015-06-06
微信小程序中webview組件的使用與應(yīng)用場景詳解
web-view組件是一個可以用來承載網(wǎng)頁的容器,會自動鋪滿整個小程序頁面,這篇文章主要介紹了微信小程序中的webview組件的基本使用方法、應(yīng)用場景、通信機制以及注意事項,需要的朋友可以參考下2025-03-03
利用JavaScript中的高階函數(shù)和閉包實現(xiàn)命令模式
命令模式提供了一種優(yōu)雅的解決方案，使得我們能夠靈活地封裝和管理代碼操作，所以本文將為大家介紹命令模式的概念、應(yīng)用場景以及在JavaScript中的實現(xiàn)方式，需要的可以參考一下2023-06-06
這篇文章主要介紹了一個js導致的jquery失效問題的解決方法，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了微信小程序日期增加時間完成訂單失效倒計時效果,在我們?nèi)粘Ｙ徫镞^程中經(jīng)常會遇到這樣的功能,本文通過示例代碼給大家詳細講解,需要的朋友參考下吧2024-04-04
下面小編就為大家?guī)硪黄@取當前按鈕或者html的ID名稱實例(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
今天小編就為大家分享一篇js監(jiān)聽html頁面的上下滾動事件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09