JS 锚点定位

 

在 mounted 就是页面的 html 和 css 加载完之后去获取整个页面的高度并进行计算，并且挂载上相对应的方法

mounted() {
    //对整个页面滚轮进行监听，每发生一次滚轮事件，执行一次方法
    window.addEventListener('scroll', this.initHeight);
    //对浏览器窗口大小触发事件进行监听
    window.onresize = () => {
      //宽度借用,赋值
      this.colWidth = document.getElementById("colWidth").offsetWidth;
      this.offsetWidth = this.colWidth - 15;
      document.getElementById("fixedCard").style.width = this.offsetWidth + 'px'
    }
    // DOM异步更新 对未来更新后的视图进行操作 在更新后执行
    this.$nextTick(() => {
      //获取到达页面顶端的值
      var height = document.getElementById("fixedCard")
      this.offsetTop = height.offsetTop + 80;
      //获取宽度
      this.offsetWidth = height.offsetWidth;
    })
  },

 

写上销毁方法，在页面离开的时候进行销毁，防止window一直监听页面高度，占用资源

destroyed() {
    //移除监听
    window.removeEventListener('scroll', this.initHeight);
  },

 

data 创建字段

offsetTop: 0,
      offsetWidth: 0,
      colWidth: 0,

methods 方法

initHeight() { //计算高度方法
      //兼容性，获取页面滚动距离
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      //判断滚动距离是否大于元素到顶端距离
      this.fixed = scrollTop > this.offsetTop ? true : false;
      //宽度赋值
      document.getElementById("fixedCard").style.width = this.offsetWidth + 'px'
    },

handleSelect(key, keyPath) { //切换方法，可以获取到唯一值的方法
      if (key == 1) {
        this.jump('kcjs')
      }
      if (key == 2) {
        this.jump('jxhd')
      }
      if (key == 3 || key == 4) {
        this.jump('kcks')
      }
      if (key == 5) {
        this.jump('yxzs')
      }
      if (key == 6) {
        this.jump('zbhk')
      }
      if (key == 7) {
        this.jump('period')
      }
    },

jump(domId) {
      // 当前窗口正中心位置到指定dom位置的距离
      //  页面滚动了的距离
      let height = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      console.log(height)
      //特别备注：以下所有的值需要通过上面 console,log 自行获取自行调整
　　　　if (domId == 'kcjs') { //根据id跳转相对应的区域
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      }
      if (domId == 'jxhd') {
        if (this.hederStatus == false) {
          document.body.scrollTop = document.documentElement.scrollTop = 110;
        } else {
          document.body.scrollTop = document.documentElement.scrollTop = 320;
        }
      }
      if (domId == 'kcks') {
        if (this.hederStatus == false) {
          document.body.scrollTop = document.documentElement.scrollTop = 420;
        } else {
          document.body.scrollTop = document.documentElement.scrollTop = 670;
        }
      }
      if (domId == 'yxzs') {
        if (this.hederStatus == false) {
          document.body.scrollTop = document.documentElement.scrollTop = 830;
        } else {
          document.body.scrollTop = document.documentElement.scrollTop = 1030;
        }
      }
      // //指定dom到页面顶端的距离
      // let dom = document.getElementById(domId);
      // let domHeight = dom.offsetTop + 60;
      // // let domHeight = 0
      // // if (domId == 'kcjs') {
      // //   domHeight = dom.offsetTop - 84;
      // // } else {
      // //   domHeight = dom.offsetTop + 60;
      // // }
      // //滚动距离计算
      // var S = Number(height) - Number(domHeight);
      // //判断上滚还是下滚
      // if (S < 0) {
      //   //下滚
      //   S = Math.abs(S);
      //   window.scrollBy({ top: S, behavior: "smooth" });
      // } else if (S == 0) {
      //   //不滚
      //   window.scrollBy({ top: 0, behavior: "smooth" });
      // } else {
      //   //上滚
      //   S = -S
      //   window.scrollBy({ top: S, behavior: "smooth" });
      // }
    },

 

template部分

创建几个 div ，赋值上相对应的id，例如：

div id=“kcjs”

这样的话调用切换方法的时候会跳转到相对应的区域