如何自定义jQuery滚动效果，让目标Header滚动后居中显示？

嘿，这个需求其实很容易实现，只需要调整滚动目标的计算逻辑就行！原来的代码是直接滚动到目标元素的顶部，现在我们要让它停在视口中部，核心就是给原来的scrollTop值加上一个动态计算的偏移量。

核心思路 #

要让目标Header位于页面中部，我们需要：

1. 获取当前视口的高度
2. 获取目标Header的高度
3. 用目标元素的顶部位置，减去「视口高度的一半」，再加上「Header高度的一半」——这样就能让Header的垂直中心刚好和视口中心对齐；如果只需要Header顶部在中部，直接减去视口高度的一半即可。

修改后的完整代码 #

$('a[href*="#"]').on('click', function(e) {
  e.preventDefault();
  
  // 先获取目标元素，避免重复DOM查询
  const targetElement = $($(this).attr('href'));
  
  // 防止点击无效锚点（比如href="#但没有对应元素"）
  if (!targetElement.length) return;

  // 计算滚动位置：让目标Header中心与视口中心对齐
  const viewportMidpoint = $(window).height() / 2;
  const targetMidpoint = targetElement.outerHeight() / 2;
  const scrollTarget = targetElement.offset().top - viewportMidpoint + targetMidpoint;

  $('html, body').animate(
    {
      scrollTop: scrollTarget,
    },
    500, 'linear'
  );
});

关键细节解释 #

• $(window).height()：获取当前浏览器视口的高度，适配不同屏幕尺寸
• targetElement.outerHeight()：获取Header的完整高度（包含padding和border，如果需要包含margin可以用outerHeight(true)）
• 额外加了!targetElement.length的判断：避免当锚点对应的元素不存在时，代码出现报错
• 如果你的Header高度是固定值（比如80px），也可以简化成固定偏移，比如scrollTarget = targetElement.offset().top - ($(window).height()/2) + 40，但动态计算的方式更通用，适配不同Header高度

可选调整：让Header顶部落在视口中部 #

如果你不需要中心对齐，只想让Header的顶部刚好在视口中间，那把滚动位置的计算改成这样就行：

const scrollTarget = targetElement.offset().top - $(window).height() / 2;

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