使用getBoundingClientRect()在页面中点击事件平缓跳转到锚点并偏移定位

介绍

使用getBoundingClientRect()方法获取目标元素的位置信息,包括元素的上边缘相对于视口顶部的距离。然后,将视口的垂直偏移量window.pageYOffset与偏移量参数进行计算,得到最终的滚动位置。

在这个例子中,我们传递了'#download-box'作为目标选择器,并将偏移量设置为-50,以便目标元素位于滚动位置的上方50像素处。

效果截图

%title插图%num

完整Demo

<button type="button" class="el-button el-button--success" onclick="smoothScrollTo('#download-box', -50)">
  <i class="b2font b2-download-cloud-line"></i><span> 立即前往 </span>
</button>

...

<div id="download-box">
  <!-- 内容 -->
</div>

<script>
  function smoothScrollTo(target, offset) {
    const element = document.querySelector(target);
    const elementPosition = element.getBoundingClientRect().top;
    const offsetPosition = elementPosition + window.pageYOffset - offset;

    window.scrollTo({
      top: offsetPosition,
      behavior: 'smooth'
    });
  }
</script>

 

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容