如何实现点击导航滚动到指定区块时与页面顶部保持固定距离？

错误原因 #

• 语法错误：你写的$id.offset(top:120)不符合JavaScript对象传参规则，就算要调用offset的赋值方法，也需要传入标准对象格式{top: 120}
• 逻辑错误：jQuery的offset()方法分两种用法：不传参数时是获取元素相对于文档的坐标对象；传入坐标对象时是设置元素的位置，完全不是用来在获取坐标时叠加偏移量的，你的调用逻辑本身就不对。

修复方案 #

你要的偏移效果直接在获取到的元素顶部坐标基础上减掉预留的顶部距离即可，预留高度要大于等于fixed定位的header高度，比如你要留120px的空隙，直接修改pos的计算逻辑就行：

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document, minus the reserved top space
    var pos = $id.offset().top - 120;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos}, 2000);
});

优化建议 #

可以把顶部预留高度抽成独立变量，后续如果header高度调整，只需要改一次变量值即可，不用修改计算逻辑：

// 顶部预留高度，统一管理
const TOP_OFFSET = 120;
// 后面计算pos时直接用：
var pos = $id.offset().top - TOP_OFFSET;

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