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;
}
}