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

【问题标题】：Scroll To error and success message after submitting a form using ScrollTo jQuery Plugin使用 ScrollTo jQuery 插件提交表单后滚动到错误和成功消息
【发布时间】：2013-01-10 13:19:27
【问题描述】：

到目前为止，我只为错误消息正常工作。但是，我希望这也适用于成功消息。这应该在联系表单中按下提交按钮时发生。点击页面右上角的联系人滚动到它。

你可以测试一下here。

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

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

有什么方法可以修改它以使用相同的 offset().top-175 滚动到 #success 和 #errors ？

提前致谢！

【问题讨论】：

标签： javascript jquery forms error-handling scrollto

【解决方案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);
  });

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

【讨论】：

感谢您的回答。不幸的是，它不起作用。即使我在 jQuery lib 之后声明了“js/contact_script.js”。我之前放“js/contact_script.js”的原因是表单中的“错误”消息显示不正确。
我的回答有误（“#errors.visible”是正确的，而不是“#errors .visible”）。我已经更新了代码
由于你在contact_script中使用JQuery，你需要在之后声明它，否则你会得到一个错误：$未定义。检查您的控制台 (F12)
您的修复成功了！你赢了！是的，我理解控制台错误，但是，就像我说如果我在 jQuery lib 之后声明错误消息将无法正确解析。可能与PHP有关。以我的经验，有时代码很奇怪，尤其是当一页中有很多内容时。只要它有效，并且页面上的其他所有内容都有效，我就很高兴。感谢您的帮助！
我不能再奖励 22 小时的赏金，但你会得到的。

【解决方案2】：

此解决方案为 Contact Form 7（WordPress 的流行表单插件）做同样的工作。我在谷歌搜索我的问题时发现了这个页面，所以我添加了下面的解决方案来帮助同样在这个页面结束的其他人。

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

【讨论】：

此解决方案仅与Contact Form 7相关，可能是题外话，如果是，请随时删除。很抱歉造成混乱。

【解决方案3】：

$(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);
});

【讨论】：

感谢您的回答，但您的解决方案会滚动到成功消息，但在提交后不会滚动到错误消息。跟我的相反！我应该提到我正在 Safari 桌面和移动设备（即 iPad）上对此进行测试，因为 Chrome 和 Firefox 处理错误的方式不同。