js瀏覽器滾動條卷去的高度scrolltop(實(shí)例講解)

發(fā)布時(shí)間：2020-09-06 09:59:06 來源：腳本之家閱讀：325 作者：jingxian 欄目：web開發(fā)

1、之前我們學(xué)習(xí)的JS盒子模型中：client系列/offset系列/scrollWidth/scrollHeight都是“只讀”的屬性-> 只能通過屬性獲取值，不能通過屬性修改元素的樣式

2、scrollTop/scrollLeft:滾動條卷去的高度/寬度（這兩個(gè)屬性是唯一“可讀寫”的屬性）

box.scrollTop = 0 // 直接回到容器的頂部

我們的scrollTop的值是存在邊界值（最大和最小值），我們設(shè)置的值比最小值小或者比最大值大都沒用，起到效果的依然是邊界的值

[最小值是零]

box.scrollTop = -1000;// 直接回到了容器的頂部，沒有超出

console.log(box.scrollTop) //0

[最大值 = 真實(shí)的高度-當(dāng)前容器一屏幕的高度]

var maxTop = box.scrollHeight - box.clientHeight;

scrollTop最經(jīng)典的應(yīng)用就是回到頂部，下面代碼如下：　

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      padding:0;
      margin:0;
    }
    html,body{
      width:100%;
      height:1000%;
      background:#11c900;
    }
    a{
      text-decoration: none;
      color:#000;

    }
  </style>
</head>
<body>
<a href="javascript:" rel="external nofollow" id="goLink">GO</a>
//A標(biāo)簽本身是跳轉(zhuǎn)頁面的，把跳轉(zhuǎn)的地址寫在href這個(gè)屬性中
/*
  1）、不寫值的話是刷新本頁面
  2）、寫的如果是#target，是錨點(diǎn)定位，定位到當(dāng)前頁面Id為target這個(gè)位置
  3）、“javascript:”這樣寫是取消A標(biāo)簽?zāi)J(rèn)跳轉(zhuǎn)的行為
*/
<script>
  var goLink =document.getElementById("goLink");
  /*
    回到頂部：
    總時(shí)間（duration）:500ms 
    頻率（interval）：多長時(shí)間走一步 10ms 
    總距離(target): 當(dāng)前的位置（當(dāng)前的scrollTop）- 目標(biāo)的位置(0)
    步長(step)：每一次走得距離  (target/duration)*interval 
  */


  /*
    這個(gè)代碼是可以優(yōu)化的:
    開始GO按鈕是不顯示的，當(dāng)滾動到一定的距離之后，才顯示，反之隱藏 只要瀏覽器的滾動條在滾動，我們就需要判斷GO顯示還是隱藏
    瀏覽器的滾動條滾動:拖動滾動條、鼠標(biāo)滾輪、鍵盤上下鍵、pageDown/pageUp鍵、點(diǎn)擊滾動條的空白區(qū)域或者箭頭（自主操作的行為）...我們還可以通過js控制scrollTop的值來實(shí)現(xiàn)滾動條的滾動
  */

  window.onscroll = function computedDisplay(){//不管怎么操作的，只要滾動條動了就會觸發(fā)這個(gè)行為
    var curTop = document.documentElement.scrollTop || document.body.scrollTop;
    var curHeight = document.documentElement.clientHeight || document.body.clientHeight;
    if(curTop>=clientHeight){
      goLink.style.display = "block"
    }else{
      goLink.style.display = "none"
    }

  }
  goLink.onclick = function(){
    this.style.display = "none";//并不會消失，因?yàn)槲覀儩L動條往回走的時(shí)候 又會觸發(fā)onscroll事件，又會進(jìn)行顯示
    window.onscroll = null;
    var duration = 500,interval=10,target=document.documentElement.scrollTop || document.body.scrollTop;
    var step = (target/duration)*interval;

    var timer = window.setInterval(function(){
      var curTop = document.documentElement.scrollTop || document.body.scrollTop;
      if(curTop===0){
        window.clearInterval(timer);
        window.onscroll = computedDisplay;
        //當(dāng)動畫結(jié)束后把對應(yīng)的方法重新綁定給window.onscroll
        return;
      }
      curTop-=step
      document.documentElement.scrollTop = curTop;
      document.body.scrollTop = curTop;
    },interval)
    // document.documentElement.scrollTop = 0;
    // document.body.scrollTop = 0;
  }
</script>
</body>
</html>

以上這篇js瀏覽器滾動條卷去的高度scrolltop(實(shí)例講解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

js瀏覽器滾動條卷去的高度scrolltop(實(shí)例講解)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽