单页锚定链接在与#link链接的某些像素下面

Question

您好，我在一个页面网站上工作，我现在面临的问题是，当我单击菜单的锚点时，它在所需区域下方只有几个像素，如图

所示。

我希望它像

我尝试过此代码，但未成功 Make anchor link go some pixels above where it's linked to

我正在使用的JavaScript是

$(document).on('click', 'a.page-scroll', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });

Answer 1

我只是从实际高度中减去所需的高度就得到了问题的解决方案。 正在为我提供完整且正在运行的代码

$(document).on('click', 'a.page-scroll', function(event) {
        var $anchor = $(this);
        var desiredHeight = $(window).height() - 577;
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - desiredHeight
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });