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