使用jQuery确认和scrollTop导致页面向上滚动然后向下滚动

Posted 2021-04-24

我在项目中使用jQuery-confirm库，当与jQuery一起使用时，页面会滚动到顶部，然后向右滚动到底部。这是代码：

$.alert({
    boxWidth: '50%',
    useBootstrap: false,
    title: '<p>Questionnaire Errors Found</p>',
    titleClass: 'alert_title',
    content: "<p class='alert_body'>Errors were found in the submitted questionaire and are highlighted in red

Please review and correct the missing information</p>",
    buttons:    {
        okay:   {
            text: 'Okay',
            btnClass: 'alert_button',
            action: function()  {

                $('html').animate({
                    scrollTop: $('#voters_guide_form').offset().top
                        }, 500);

                    }
                }
            }
        });

如果我不使用确认库，行为将按预期工作。也不使用animate并不会使页面完全滚动。我已经尝试在动画中使用html，body，没有任何变化，我已经在警报代码内外移动了动画代码，但它仍然做同样的事情。

通过他们的文档和互联网，我似乎无法找到这样的东西。

答案

你应该使用$('body')而不是$('html')

Answer source

所以你需要将代码更改为：

$.alert({
    boxWidth: '50%',
    useBootstrap: false,
    title: '<p>Questionnaire Errors Found</p>',
    titleClass: 'alert_title',
    content: "<p class='alert_body'>Errors were found in the submitted questionaire and are highlighted in red

Please review and correct the missing information</p>",
    buttons:    {
        okay:   {
            text: 'Okay',
            btnClass: 'alert_button',
            action: function()  {
                 //Changed to body and added stop
                $('body').stop().animate({
                    scrollTop: $('#voters_guide_form').offset().top
                        }, 500);
                    }
                }
            }
        });

此外，在运行新动画之前，最好停止在body中运行的动画。这就是我添加stop()方法的原因。

请注意：如果您通过iframe导入此代码，它将无法工作，因为使用iframe，您的页面现在将有2个（或更多）主体，$('body')应返回数组而不是对象。