vue锚点定位+滚动效果

码以备用

只有向上没有向下的定位和滚动

locationAnchor() {
      setTimeout(() => {
        // 获取dom
        let cateItem = document.querySelectorAll(".active");
        let tempTop = cateItem[0].offsetTop - 10;

        // 距离细化
        let step = tempTop / 50;
        // console.log(step);
        // 滚动到响应位置  定时器模仿动画
        setTimeout(() => {
          document.documentElement.scrollTop = tempTop;
        }, step);
        document.body.scrollTop = tempTop;
        // 获取到顶部距离
        let distance =
          document.documentElement.scrollTop || document.body.scrollTop;
        // console.log(distance);
        // 获取到锚点位置距离
        let newTotal = distance - tempTop;
        step = newTotal / 50;
        function smoothUp() {
          if (distance > tempTop) {
            distance -= step;
            document.body.scrollTop = tempTop;
            document.documentElement.scrollTop = distance;
            setTimeout(smoothUp, 10);
          } else {
            document.body.scrollTop = tempTop;
            document.documentElement.scrollTop = tempTop;
          }
        }
        setTimeout(smoothUp(), 10);
      }, 0);
    },