单页锚点 link 在用 #link 编辑 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();
    });

单页锚点 link 在用 #link 编辑 link 的某些像素下方

Single page anchor link goes bellow some pixels where it is linked with #link

html

javascript

css

anchor

jquery