欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js?scrollTop如何到達(dá)指定位置

 更新時間：2022年10月25日 15:19:37   作者：十三把刀丶  
很早之前就想分享這篇心得，幸之今天能在這里完成，好了，話不多說，進(jìn)入正題。如有錯誤或未考慮完全的地方，望不吝賜教

js scrollTop到達(dá)指定位置

方法主要利用scrolltop值做運動， 用于到達(dá)用戶指定的位置（如返回頂部把參數(shù)target設(shè)置為0即可），處理了多種情況如 scrolltop > 目標(biāo)值 向上運動 ，等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) }); //運動到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： 

  • 火狐等等相對標(biāo)準(zhǔn)些的瀏覽器就省心多了，直接用 document.documentElement.scrollTop ； 

2、獲取scrollTop值 

完美的獲取scrollTop 賦值短語 ： 

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

通過這句賦值就能在任何情況下獲得scrollTop 值。 

仔細(xì)觀察這句賦值，你發(fā)現(xiàn)啥了沒？？ 

沒錯， 就是 window.pageYOffset  (Safari)   被放置在 || 的中間位置。 

因為當(dāng) 數(shù)字0 與 undefine 進(jìn)行 或運算時，系統(tǒng)默認(rèn)返回最后一個值。即或運算中 0 == undefine ; 

當(dāng)頁面滾動條剛好在最頂端，即scrollTop值為 0 時。  IE 下 window.pageYOffset  (Safari) 返回為 undefine ，此時將window.pageYOffset  (Safari) 放在或運算最后面時， scrollTop 返回 undefine ,  undefine 用在接下去的運算就會報錯咯。 

而其他瀏覽器 無論 scrollTop 賦值或運算順序如何都不會返回 undefine.  可以安全使用.. 

所以說到頭還是IE的問題咯. 杯具… 

精神有點恍惚，不知道有沒有表達(dá)清楚。 

不過最后總結(jié)出來這句實驗過OK，大家放心使用； 

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • JS button按鈕實現(xiàn)submit按鈕提交效果

    JS button按鈕實現(xiàn)submit按鈕提交效果

    今天在使用表單是同時使用POST更新、刪除操作。然而form表單的 submit 且一旦提交則全部提交，所以想到的實現(xiàn)方法就是 使用button實現(xiàn),怎么實現(xiàn)呢？下面小編給大家分享JS button按鈕實現(xiàn)submit按鈕提交效果，感興趣的朋友參考下吧
    2016-11-11
  • javascript中eval函數(shù)用法分析

    javascript中eval函數(shù)用法分析

    這篇文章主要介紹了javascript中eval函數(shù)用法,實例分析了javascript中eval函數(shù)的使用技巧,非常具有實用價值,需要的朋友可以參考下
    2015-04-04
  • 深入理解JS的事件綁定、事件流模型

    深入理解JS的事件綁定、事件流模型

    這篇文章主要介紹了JS的事件綁定、事件流模型的相關(guān)知識，非常不錯，具有參考借鑒價值，感興趣的朋友跟隨腳本之家小編一起看看吧
    2018-05-05
  • 通過js動態(tài)操作table(新增，刪除相關(guān)列信息)

    通過js動態(tài)操作table(新增，刪除相關(guān)列信息)

    通過js動態(tài)操作table(新增，刪除相關(guān)列信息)的實現(xiàn)代碼，需要的朋友可以參考下
    2012-05-05
  • JS跨瀏覽器解析XML應(yīng)用過程詳解

    JS跨瀏覽器解析XML應(yīng)用過程詳解

    這篇文章主要介紹了JS跨瀏覽器解析XML應(yīng)用過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-10-10
  • layui的表單驗證支持ajax判斷用戶名是否重復(fù)的實例

    layui的表單驗證支持ajax判斷用戶名是否重復(fù)的實例

    今天小編就為大家分享一篇layui的表單驗證支持ajax判斷用戶名是否重復(fù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • 詳解微信小程序（Taro）手動埋點和自動埋點的實現(xiàn)

    詳解微信小程序（Taro）手動埋點和自動埋點的實現(xiàn)

    這篇文章主要介紹了詳解微信小程序（Taro）手動埋點和自動埋點的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-03-03
  • layui從數(shù)據(jù)庫中獲取復(fù)選框的值并默認(rèn)選中方法

    layui從數(shù)據(jù)庫中獲取復(fù)選框的值并默認(rèn)選中方法

    今天小編就為大家分享一篇layui從數(shù)據(jù)庫中獲取復(fù)選框的值并默認(rèn)選中方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • JavaScript錯誤處理超完整實用指南

    JavaScript錯誤處理超完整實用指南

    在JavaScript中進(jìn)行錯誤處理,最常見的方式就是使用try catch語句,下面這篇文章主要給大家介紹了關(guān)于JavaScript錯誤處理的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-11-11
  • 簡單對比分析JavaScript中的apply,call與this的使用

    簡單對比分析JavaScript中的apply,call與this的使用

    簡單的說call，apply都屬于Function.prototype的一個方法，它是JavaScript引擎內(nèi)在實現(xiàn)的，因為屬于Function.prototype，所以每個Function對象實例(就是每個方法)都有call，apply屬性。既然作為方法的屬性，那它們的使用就當(dāng)然是針對方法的了，這兩個方法是容易混淆的
    2015-12-12

最新評論