我在项目中使用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\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);
}
}
}
});
如果我不使用确认库,行为将按预期工作。也不使用animate并不会使页面完全滚动。我已经尝试在动画中使用html,body,没有任何变化,我已经在警报代码内外移动了动画代码,但它仍然做同样的事情。
通过他们的文档和互联网,我似乎无法找到这样的东西。
你应该使用$('body')
而不是$('html')
所以你需要将代码更改为:
$.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个(或更多)主体,$('body')
应返回数组而不是对象。