vue实现楼层滚动效果

1、给每个楼层加个钩子

class="d_jump"

2、具体实现

jump(i){
    let jump = document.getElementsByClassName("d_jump");
    //获取当前滚动条与窗体顶部的距离
    let distance =
    document.documentElement.scrollTop || document.body.scrollTop;
    //获取需要滚动的距离
    let total = jump[i].offsetTop - 48;(我是减去了导航栏的长度)
    //计算每小段的距离
    let step = total / 50;
    if (total > distance) {
      moveDown();  //向下移动的函数
    } else {
      let newTotal = distance - total;
      step = newTotal / 50;
      moveUp();  //向上移动的函数
    }
    function moveDown() {
      if (distance < total) {
        distance += step;
        document.body.scrollTop = distance;
        document.documentElement.scrollTop = distance;
        //设置每次跳动的时间间隔
        setTimeout(moveDown, 10);
      } else {
        //限制滚动停止时的距离
        document.body.scrollTop = total;
        document.documentElement.scrollTop = total;
      }
    }
    function moveUp() {
      if (distance > total) {
        distance -= step;
        document.body.scrollTop = distance;
        document.documentElement.scrollTop = distance;
        setTimeout(moveUp, 10);
      } else {
        document.body.scrollTop = total;
        document.documentElement.scrollTop = total;
      }
    }
}

offsetTop是获取对象到窗体顶部的距离

scrollTop是设置或获取位于对象最顶端和窗口中可见内容的最顶端的距离

各个浏览器下获取scrollTop有所差异

Chrome:

document.body.scrollTop

Firefox:

document.documentElement.scrollTop