固定头部后平滑滚动到指定div的问题

头部初始样式配置：height 为 100px，position 为 static，CSS代码如下：

.header {
   height: 100px;   
}

当页面滚动时，header 会切换为 fixed 定位，固定在页面顶部。

需求是点击「Click Me!」按钮时，实现平滑滚动到类名为.second的div，但当前jQuery代码存在问题：因为固定头部占据了100px的顶部空间，滚动后.second会被头部遮挡，无法完整显示。

当前实现代码：

<header class="header"></header>
<div class="first"><button type="button">Click Me!</button></div>
<div class="second">Hi</div>

$("button").click(function() {
  $('html,body').animate({
      scrollTop: $(".second").offset().top
    },
    'slow');
});

问题核心是计算滚动目标位置时，没有扣除固定头部的高度。只需要在目标元素的顶部位置基础上减去头部的高度即可解决遮挡问题，修改后的代码如下：

$("button").click(function() {
  // 获取头部的实际高度，outerHeight()会包含内边距和边框
  const headerHeight = $(".header").outerHeight();
  $('html,body').animate({
      scrollTop: $(".second").offset().top - headerHeight
    },
    'slow');
});

额外提示 #

• 使用outerHeight()而非硬写100px的优势在于，后续如果头部高度发生变化（比如响应式调整、添加内边距/边框），代码无需手动修改数值，能自动适配新的高度。
• 如果头部是通过动态添加类来切换fixed定位的，要确保获取高度时，头部的样式已经正确应用（比如可以在DOM加载完成后或滚动触发后执行高度获取逻辑）。

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