Joomla站点JoomShaper模板锚点被粘性头遮挡：如何修改平滑滚动JS留75px上边距

直接修改原有JS的滚动位置计算逻辑，在滚动终点扣除粘性头部的固定高度即可，无需额外调整原有CSS，可避免JoomShaper模板自身布局规则导致的自定义CSS失效问题。

核心修改逻辑 #

原有代码直接取目标元素的顶部偏移值作为滚动终点，会让目标元素完全贴在视口最顶部，被固定高度的粘性头部遮挡。修改时只需在计算滚动终点时减去头部高度，即可在滚动完成后自然留出预留空间。

完整修改后代码 #

$(function() {
  // 配置项：按实际测量的粘性头部高度修改对应数值
  const stickyHeaderHeight = 75;
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      // 匹配锚点对应的目标区块，兼容id锚点和name锚点两种写法
      let target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          // 滚动终点 = 目标元素顶部位置 - 粘性头部高度，实现预留边距
          scrollTop: target.offset().top - stickyHeaderHeight
        }, 1000);
        return false;
      }
    }
  });
});

原有CSS方案失效原因 #

• 给区块添加:before伪元素撑开偏移的方案，会被JoomShaper模板给区块设置的默认margin、flex布局规则覆盖，无法实际产生预期的偏移量
• 给锚点链接添加自定义类控制偏移的方案，因为锚点的定位目标是页面区块而非链接本身，样式无法作用到实际滚动目标上，自然没有效果

落地注意事项 #

• 配置项stickyHeaderHeight的数值要和实际测量的粘性头部高度完全一致，后续调整头部高度时只需修改这一处数值即可
• 若站点是响应式设计，不同屏幕尺寸下头部高度存在差异，可将固定值替换为动态获取头部实际高度的写法，比如取对应头部选择器的outerHeight()值，自动适配不同设备
• 该方案无需给每个锚点单独加自定义类、也不需要修改原有页面的区块结构，不会和JoomShaper模板自带的布局规则产生冲突

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