介绍
使用getBoundingClientRect()
方法获取目标元素的位置信息,包括元素的上边缘相对于视口顶部的距离。然后,将视口的垂直偏移量window.pageYOffset
与偏移量参数进行计算,得到最终的滚动位置。
在这个例子中,我们传递了'#download-box'
作为目标选择器,并将偏移量设置为-50
,以便目标元素位于滚动位置的上方50像素处。
效果截图
完整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
暂无评论内容