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

Question

如果你向下滚动页面到

Berechnen Sie hier Ihre Ersparnis mit SD-WAN

在它下面你会看到一个表格。保持表格不变，不要填写任何内容，然后点击上面写着以下内容的红色大提交按钮：

Kostenlos präzise Berechnung des Einsparungspotentials anfordern

您应该会看到浏览器向下滚动到第一个必填输入字段，但这已被固定导航覆盖。

我想通过添加一些 jquery 来滚动到输入并添加一个偏移量来解决这个问题。

这是我迄今为止尝试过的，但页面根本没有scolling：

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')) } )