Выделите сообщение об ошибке и успехе после отправки формы с помощью плагина ScrollTo jQuery

Question

Пока у меня это работает правильно только для сообщения об ошибке. Тем не менее, я хотел бы, чтобы это работало и на сообщение об успехе. Это должно произойти при нажатии кнопки отправки в контактной форме. Нажмите на контакт в правом верхнем углу страницы, чтобы перейти к нему.

Вы можете проверить это здесь.

Вот 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);
  });

И исправьте тот факт, что ваш скрипт "js/contact_script.js" должен быть объявлен после lib JQuery

Answer 2

Это решение выполняет ту же работу для 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 );
    });
});

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