美文网首页
vue实现锚点定位

vue实现锚点定位

作者: 上海_前端_求内推 | 来源:发表于2023-04-09 17:30 被阅读0次

    1,事件
    <div @click="goDingyue">立即订阅</div>
    2,绑定事件

    methods: {
     goDingyue() {
          // 获取元素在页面中的位置
          console.log(this.$refs.dingyue_box_ref.getBoundingClientRect());
     
          // document
          //   .getElementById("agentTitle")
          //   .scrollIntoView({ block: "start", behavior: "smooth" });
          // 跳转到指定位置并且平滑滚动
          this.$el
            .querySelector(".dingyue_box")
            .scrollIntoView({ block: "start", behavior: "smooth" });
        },
    }
    

    3,内容

    <div class="dingyue_box" ref="dingyue_box_ref">
          立即订阅内容
        </div>
    

    相关文章

      网友评论

          本文标题:vue实现锚点定位

          本文链接:https://www.haomeiwen.com/subject/xlwbddtx.html