首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >修改scrollTop

修改scrollTop
EN

Stack Overflow用户
提问于 2020-01-30 18:09:15
回答 1查看 46关注 0票数 0

我使用下面这行代码来处理标准JavaScript:

代码语言:javascript
复制
if (($messageSuccess.offset().top - 80) < $(window).scrollTop()) {
  $('html, body').animate({
    scrollTop: $messageSuccess.offset().top - 80
  }, 300);
}

我试图在2秒后将$messageSuccess返回到它原来的位置,但无论如何我都找不到。

它似乎不工作..。我猜一定是代码中的其他东西造成了麻烦。

这是与联系人表单相关的代码:

代码语言:javascript
复制
$('.contact-form').each(function(){
        $(this).validate({
            submitHandler: function(form) {

                var $form = $(form),
                    $messageSuccess = $form.find('.contact-form-success'),
                    $messageError = $form.find('.contact-form-error'),
                    $submitButton = $(this.submitButton),
                    $errorMessage = $form.find('.mail-error-message'),
                    submitButtonText = $submitButton.val();

                $submitButton.val( $submitButton.data('loading-text') ? $submitButton.data('loading-text') : 'Cargando...' ).attr('disabled', true);

                // Fields Data
                var formData = $form.serializeArray(),
                    data = {
                        textSample: $form.find('#textSample').val(),
                        selectSample: $form.find('#selectSample').val()
                    };

                $(formData).each(function(index, obj){
                    data[obj.name] = obj.value;
                });

                // Google Recaptcha v2
                if( data["g-recaptcha-response"] != undefined ) {
                    data["g-recaptcha-response"] = $form.find('#g-recaptcha-response').val();
                }

                // Ajax Submit
                $.ajax({
                    type: 'POST',
                    url: $form.attr('action'),
                    data: data
                }).always(function(data, textStatus, jqXHR) {

                    $errorMessage.empty().hide();

                    if (data.response == 'success') {

                        // Uncomment the code below to redirect for a thank you page
                        // self.location = 'thank-you.html';

                        $messageSuccess.removeClass('d-none');
                        $messageError.addClass('d-none');

                        // Reset Form
                        $form.find('.form-control')
                            .val('')
                            .blur()
                            .parent()
                            .removeClass('has-success')
                            .removeClass('has-danger')
                            .find('label.error')
                            .remove();


                        $form.find('.form-control').removeClass('error');

                        $submitButton.val( submitButtonText ).attr('disabled', false);

                        return;

                    } else if (data.response == 'error' && typeof data.errorMessage !== 'undefined') {
                        $errorMessage.html(data.errorMessage).show();
                    } else {
                        $errorMessage.html(data.responseText).show();
                    }

                    $messageError.removeClass('d-none');
                    $messageSuccess.addClass('d-none');

                    if (($messageError.offset().top - 80) < $(window).scrollTop()) {
                        $('html, body').animate({
                            scrollTop: $messageError.offset().top - 80
                        }, 300);
                    }

                    $form.find('.has-success')
                        .removeClass('has-success');

                    $submitButton.val( submitButtonText ).attr('disabled', false);

                });
            }
        });
    });
EN

回答 1

Stack Overflow用户

发布于 2020-01-30 18:17:49

您需要的是setTimeout函数

代码语言:javascript
复制
 if (($messageSuccess.offset().top - 80) < $(window).scrollTop()) {
   setTimeout(function(){
         $('html, body').animate({
            scrollTop: $messageSuccess.offset().top - 80
           }, 300)
          },2000);
  }

2秒后,它将执行您的animate

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59983519

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档