始于此, 终于斯
文章31
标签0
分类13

Vue页面锚点

页面定义一个绝对定位元素

<div id="abs"></div>
  #abs {
    position: absolute;
    height: 0;
    width: 0;
  }

页面路由添加一个锚点选参

{
    path: "/index/:anchor?",
    name: "Index",
    meta: {
      title: "XXX",
      keepAlive: false,
    },
    component: () => import("@views/Index.vue")
}

// 页面加载后, 计算位置并跳到相应的位置

mounted: function() {
    this.$nextTick(() => {
      if (this.$route.params.anchor) {
        setTimeout(() => {
          var anchor = document.querySelector("#abs");
          anchor.style.top =
            document.querySelector("#" + this.$route.params.anchor).offsetTop -
            document.querySelector("#header").offsetHeight -
            30 +// 如果有固定头部, 酌情添加高度
            "px";
          anchor.scrollIntoView();
        }, 500);
      }
    });
  }

    1 评论

    1. 1 12月6日 回复
      555