如何使用jQuery实现点击菜单项平滑滚动到指定区域并调整偏移量

问题原因 #

你当前代码的核心问题是使用了$(target).offset().top获取的是目标元素相对于整个文档顶部的距离，而你实际的滚动容器是内部的.content元素，计算滚动距离时应该用目标元素相对于滚动容器顶部的距离，再调整预留间距即可。

解决方案 #

直接修改JS代码里的position计算逻辑即可，不需要改动HTML和CSS：

$(document).ready(function(){
  $('.item').click(function(e){
    e.preventDefault();
    let target = $(this).attr('href');
    // 获取目标元素相对于.content容器的顶部距离，再减去20px预留间距
    let position = $(target).position().top - 20;
    $('.content').animate({scrollTop: position}, 1000);
  })
})

原理说明 #

• position().top获取的是元素相对于其最近的定位父元素的顶部距离，这里.content是父容器，刚好符合计算基准要求
• 减去的20px就是你要求的目标区块和顶部黑色分割线的间距，你可以根据实际视觉效果调整这个数值
• 原代码固定减300属于硬编码数值，不同长度的内容下自然会出现定位不准的问题

内容的提问来源于stack exchange，提问作者AWEI