vue滚动到页面指定位置增加偏移量

vue yekong

vue项目开发过程中,需要实现点击按钮滚动到指定位置,但是实现滚动后发现滚动的太靠上了,这不是想要的效果,想要实现的是往上滚,但是需要增加一点偏移量,才能达到预期的效果。

<div class="menuListItem" @click="scrollTo('fuwu')">
<span>服务须知</span>
</div>
<div class="mainTitle" id="fuwu">
<img src="../assets/icon_fuwu.png" alt="">
<span>服务须知</span>
</div>

实现代码

scrollTo(sectionId) {
      const element = document.getElementById(sectionId);
      if (element) {
        const offset = 110; // 偏移量
        const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
        const offsetPosition = elementPosition - offset;

        window.scrollTo({
          top: offsetPosition,
          behavior: 'smooth'
        });
        this.show = false;
      }
    }
喜欢