使wordpress自定义锚链接滚动到固定标题下方

Question

我已经坚持了好几天。 我无法理解。

我有一个Wordpress页面，根据客户的要求在内容页面上使用自定义锚点链接。从导航中单击锚链接时，内容会在我的固定标题后面流动。我需要将此内容显示在固定标题下方，以便它不会被截断。

我已经尝试了插件，css，直接jquery，你的名字。 我无法做到这一点。

网站就在这里，如果你点击其中一个下拉导航链接，你会看到我的意思。

http://www.zachkeller.net/cp_site/about#company

请帮忙。我在这里绝望了。

Answer 1

修改

这是一种使用jQuery的方法。由于我没有测试它，所以可能会有一些错误。让我知道：

jQuery(document).ready(function($) {
    var scrollOffset = $('.header-wrapper').outerWidth();
    $('#nav a').on('click', function(e) {
        var regex = new RegExp(/\#(.*)/),
        url = $(this).attr('href'),
        search = url.match(regex);

        if(search === null || search[1] === '') {
            return true;
        }

        var element = $('#' + search[1]);
        if(element.length) {
            e.preventDefault();
            var scrollTo = element.offset().top - scrollOffset - 20;
            $('html, body').animate({
                scrollTop: scrollTo
            }, 'fast');
            return false;
        }
        return true;
    });
});

OLD COMMENT

我需要说两件事：

1. 添加自定义锚链接的方式有误。而不是网址http://www.zachkeller.net/cp_site/approach#method，它应该是http://www.zachkeller.net/cp_site/approach/#method。请注意尾部斜杠。

2. 现在针对您的问题，快速的CSS黑客攻击可能会让您前进：

   .blog-inside > div {
       padding-top: 110px;
   }
   

如果那不是您想要的，请告诉我。我将提供更全面的jQuery解决方案。