jQuery使用.offset方法滚动到指定CSS类时追加额外像素偏移如何实现

修正后的代码 #

// 确保DOM完全加载后再执行逻辑
$(function() {
  if(top.location.pathname === '/registration/'){
    $('html,body').animate({
      // 先取元素距文档顶部的原始距离，减去头部预留高度即可
      scrollTop: $(".registration").offset().top - 156
    });
  }
});

改动说明 #

• 你之前使用offset({ top: 156 })属于API误用：offset()方法不传参时是获取元素当前距离文档顶部的距离值，传入配置对象时是修改元素本身在页面中的定位，和滚动偏移计算无关。
• 滚动时需要的偏移量逻辑是：目标元素的原始顶部距离 - 粘性头部占位高度，就能保证元素顶部刚好在粘性头部下方显示，不会被遮挡。
• 额外加了DOM加载完成的包裹逻辑，避免页面元素未渲染完成时，获取.registration的offset值出错导致滚动位置异常。

可选优化（按需使用） #

如果担心路径末尾斜杠兼容问题，可以把路径判断改成更宽松的写法：

if(top.location.pathname.indexOf('/registration') > -1)

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