Question

到目前为止，我只能正确处理错误消息。但是，我希望这也适用于成功的消息。在联系表单中按下提交按钮时会发生这种情况。单击页面右上角的联系人以滚动到该页面。

您可以对其进行测试here。

这是我用于错误消息的jQuery：

     $(document).ready(function() {
     $(".error:first").attr("id","errors");
    $("#errors").each(function (){
        $("html,body").animate({scrollTop:$('#errors').offset().top-175}, 1000);
    });
  });

任何修改它的方法都可以滚动到带有相同偏移量的#success和#errors（）。top-175？

提前致谢！

Answer 1

你可以这样做：

  $(document).ready(function() {
     var pos = null;
     if($("#contact-form #errors.visible").length > 0)
        pos = $('#errors').offset().top;

     if($("#contact-form #success.visible").length > 0)
        pos = $('#success').offset().top;

     if(pos != null)
         $("html,body").animate({scrollTop:pos-175}, 1000);
  });

并修复了必须在JQuery lib之后声明脚本“js / contact_script.js”的事实

Answer 2

$(document).ready(function () {
    var $elementToScrollTo;
    var $firstError = $(".error:first");
    if ($firstError.length > 0) {
        $firstError.attr("id", "errors");
        $elementToScrollTo = $firstError;
    }
    else {
        $elementToScrollTo = $("#success");
    }
    $("html,body").animate({
        scrollTop: $elementToScrollTo.offset().top - 175
    }, 1000);
});

Answer 3

此解决方案对Contact Form 7（适用于WordPress的流行表格插件）起到了同样的作用。我在Google搜索问题期间找到了该页面，因此我在下面添加了解决方案，以帮助其他也在此页面结束的人。

jQuery(function ($) {
    $(document).ready(function ()
    {
        var wpcf7Elm = document.querySelector( '.wpcf7' );
        wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
            setTimeout(function() {
                $([document.documentElement, document.body]).animate({
                    scrollTop: $(".wpcf7-response-output").offset().top - 100
                }, 500);
            }, 500);
            //console.log("Submited");
        }, false );
    });
});

使用ScrollTo jQuery插件提交表单后滚动到错误和成功消息

3 个答案: