vueアンカー位置決め+スクロール効果

5983 ワード

代替コード
上下方向への位置決めとスクロールのみ
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);
    },