滚动到输入字段但偏置固定导航？

Question

如果将页面向下滚动到

贝莱奇南·西赫尔·艾瑞·埃斯帕尼斯麻省理工学院SD-WAN

在下面你会看到一张表格。保留表单原样，不要填写任何内容，并单击上面显示以下内容的红色提交大按钮：

pr zise Berechnung des Einsparungspotentials和anfordern

您应该看到浏览器向下滚动到第一个必需的输入字段，但这是由固定的导航。

我想通过添加一些jquery来滚动到输入，但也添加一个偏移量来修复这个问题。

到目前为止，这是我所尝试过的，但这一页根本没有责骂：

if ( $('.error').css('display') !== 'none' ) {
        $('html, body').animate({
            scrollTop: $(".roicalculatorblock .error").offset().top
        }, 1000);
    }

尽管我的代码，浏览器仍然滚动，但固定的导航覆盖输入字段。

Answer 1

我没有看到动画发生*，但是看看您的代码，我会减去头部高度，并且(在animate完成之后，将展开的头类移到主体上。

$('html, body').animate({
   scrollTop: $(".roicalculatorblock .error").eq(0).offset().top - $('#anchorNav').outerHeight()
}, 1000); // time
setTimeout(function() { $('body').addClass('nav-up').removeClass('nav-down') }, 1000) // wait for the time

*因此，这肯定是其他一些问题；也许可以分享您是如何在表单上等待submit事件的(可能您只是缺少了一个preventDefault())。

还要考虑到基于类(有多个实例)的值选择是有风险的。

查看控制台记录的有关此代码的内容(并非所有.error元素都具有相同的display值)：

$('.error').each(function() { console.log($(this).css('display')) } )