官网静态页总结（vue）（页面滚动）

1.点击按钮 页面平滑滚动到指定位置

<div class="btn">
  <span @click="Submit(1)">按钮一</span>
  <span @click="Submit(2)">按钮二</span>
  <span @click="Submit(3)">按钮三</span>
  <span @click="Submit(4)">按钮四</span>
  <span @click="Submit(5)">按钮五</span>
</div>
<div class="page">
  <div id="page1" style="background:red;"></div>
  <div id="page2" style="background:blue;"></div>
  <div id="page3" style="background:skyblue;"></div>
  <div id="page4" style="background:pink;"></div>
  <div id="page5" style="background:green;"></div>
</div>

methods: {
    Submit (key) {
      // 获取点击的按钮对应页面的id
      var PageId = document.querySelector('#page' + key)
      // 打印出对应页面与窗口的距离
      console.log(PageId.offsetTop)
      // 使用平滑属性，滑动到上方获取的距离
      // 下方只设置了top，也可以加上 left 让他横向滑动
      // window 根据浏览器滚动条，如要在某个盒子里面产生滑动，记得修改
      window.scrollTo({
        'top': PageId.offsetTop,
        'behavior': 'smooth'
      })
    }
}

2.页面滚动时颜色随着滚动的高度交替变化

------------------------------------------html---------------------------------
<div class="blue">
  <img src="../assets/img/blue.jpg" alt="">
  // 为pink设置style变量 控制高度随页面滚动而变化
  <div class="pink" :style="style">
  	<img src="../assets/img/pink.jpg" alt="">
  </div>
</div>

------------------------------------------js---------------------------------
data() {
  return {
    style: {
      "height":"0px"
    },
  }
},

mounted() {
  window.addEventListener("scroll", this.windowScroll); //监听页面滚动
},

methods: {
  windowScroll() {
    let scrollTop = document.documentElement.scrollTop||document.body.scrollTop
        this.style = {
          "height":`${scrollTop}px`
        }
    },
}

------------------------------------------css---------------------------------
.blue{
  width: 890px;
  height: 2000px;
  margin: 30px auto;
  position: relative;
  .pink{
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
  }
}

3.随页面滚动颜色渐变

<div class="header" :style="style">

data() {
  return {
      style: {
          "background-color":"red",
          "width":"100vw",
          "height":"1000px"
      },
      opacity: 0,
  }
},
mounted() {
  window.addEventListener("scroll", this.windowScroll); //监听页面滚动
},
methods: {
  windowScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.opacity = Math.abs(Math.round(scrollTop)) / 250;
      this.style = {
          'background': `rgba(0, 0, 0,${this.opacity})`,
          'background-color':"green",
          "width":"100vw",
          "height":"1000px"
      }
  },
}