使用 ScrollTo jQuery 插件提交表單后滾動到錯誤和成功消息

Question

到目前為止，我只針對錯誤消息正常工作。 但是，我希望這也適用於成功消息。 當在聯系表單中按下提交按鈕時，應該會發生這種情況。 單擊頁面右上角的聯系人以滾動到它。

你可以在這里測試。

這是我用於錯誤消息的 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 ？

提前致謝！

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

並修復您的腳本“js/contact_script.js”必須在 JQuery lib 之后聲明的事實

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

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