Question

如果您向下滚动页面到

Berechnen Sie hier Ihre Ersparnis mit SD-WAN

在它下面，您将看到一个表格。保留表格原样，不填写任何内容，然后单击上面有以下内容的红色大提交按钮：

KostenlospräziseBerechnung des Einsparungspots 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')) } )

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

1 个答案: