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

时间:2019-03-14 16:15:02

标签: javascript jquery jquery-ui jquery-plugins

我在项目上使用jQuery确认库,当与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\n\nPlease 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);

                    }
                }
            }
        });

如果我不使用确认库,则行为按预期进行。同样,不使用动画也不会使页面滚动。我尝试使用html,body进行动画处理,但没有做任何更改,并且将动画代码移入了警报代码的内部和外部,但是它仍然执行相同的操作。

通过他们的文档和互联网,我似乎找不到类似的东西。

1 个答案:

答案 0 :(得分:0)

您应该使用$('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\n\nPlease 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个(或更多)主体和{{ 1}}应该返回一个数组而不是对象。