[英]How to scroll to the top of a modal window in javascript
My requirement is that I need to show a modal window as a form to be filled by user. 我的要求是我需要将模态窗口显示为要由用户填充的表单。 But the height of that modal should be not more then window size. 但是该模态的高度不应超过窗口大小。
So if the entries in form are too much then the modal becomes scrollable. 因此,如果表单中的条目太多,则模态变为可滚动。 The problem is that while validating the entries in the form the error message is shown at the top of the modal above the first entry. 问题是,在验证表单中的条目时,错误消息显示在第一个条目上方的模式顶部。 If user is at last property then he will not be knowing that some validation error had occurred unless the modal is scrolled to top on the error event. 如果用户位于最后一个属性,那么除非模态在错误事件上滚动到顶部,否则他不会知道发生了一些验证错误。
I have tried : 我试过了 :
$(window).scrollTop();
// and
$('#modalId').scrollTop();
this is the modal code: 这是模态代码:
<div class="modal hide" id="groupModal" tabindex="-1" role="dialog" aria-hidden="true" >
<div class="modal-header">
</div>
<div class="modal-body" style="max-height: 300px;">
<div class="grpForm">
<div class="alert alert-error hide">
<span class="errMsg"></span>
</div>
<div class="alert alert-success hide">
<span class="successMsg"></span>
</div>
<form class = "formFieldHolder" id="groupInfoForm"></form>
</div>
</div>
<div class="modal-footer">
<button class="btn cancelFormBtn" data-dismiss="modal" aria-hidden="true" msgkey="common.cancel.label"></button>
<button class="btn btn-primary submitGroupFormBtn" type="submit" msgkey="common.submit.label"></button>
</div>
</div>
$('#modalId').scrollTop(0);
scrollTop()
only returns the value; scrollTop()
只返回值; scrollTop(0)
sets the value to 0 (all the way to the top) scrollTop(0)
将值设置为0(一直到顶部)
To scroll the page to the modal, select html, body
and scroll to the offset top of the modal 要将页面滚动到模态,请选择html, body
并滚动到模态的偏移顶部
$("html, body").scrollTop($("#modalId").offset().top);
If you want to scroll the modal div to the top use 如果要将模态div滚动到顶部使用
$("#modalId").scrollTop(0);
Example on jsFiddle 关于jsFiddle的示例
You can combine both to scroll the page and the modal to a visible area for the user if needed. 如果需要,您可以将两者结合使用以将模式滚动到用户可见区域。
References 参考
This is a solution without using JQuery, first you get your modal by the id and then, the function scrollIntoView will move to the top of the element you selected, in this case your modal. 这是一个不使用JQuery的解决方案,首先你通过id得到你的模态然后,函数scrollIntoView将移动到你选择的元素的顶部,在这种情况下你的模态。
let element = document.getElementById('groupModal');
element.scrollIntoView(true);
<script type="text/javascript">
$(document).ready(function(){
$('.scroll_top').hide();
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scroll_top').fadeIn();
} else {
$('.scroll_top').fadeOut();
}
});
$('.scroll_top').click(function(){
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
</script>
To avoid rough movement to the top I would prefer to use (animated movement): 为了避免粗暴移动到顶部,我宁愿使用(动画运动):
$('#modalId').animate({
scrollTop : 0
}, 'slow');
You have to include "jquery-1.7.1.min.js" file in your page. 您必须在页面中包含“jquery-1.7.1.min.js”文件。 http://code.jquery.com/jquery-1.7.1.min.js http://code.jquery.com/jquery-1.7.1.min.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.