如何滚动到部分但与顶部保持一定距离？

Question

当我们单击导航菜单项时，我正在使用以下代码平滑滚动到部分：

// 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
        var pos = $id.offset().top;

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

但是，我需要将 header 放在固定位置，高度为 90px，现在当我们滚动到该部分时，该部分的开头隐藏在该部分后面。是否可以保留我的代码并包括例如距顶部一定距离？

我试图在偏移方法上添加一个参数，但没有成功：

// 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
        var pos = $id.offset(top:120).top;

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

我是不是做错了什么？

Answer 1

var pos = $id.offset().top - 90;

是这个意思吗？

如何滚动到部分但与顶部保持一定距离？

How to scroll to section but keeping a distance from top?

javascript

jquery

animation

scroll