jQuery 如何在javascript中滚动到模态窗口的顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16910362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to scroll to the top of a modal window in javascript
提问by kavinder
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>
采纳答案by Tom
$('#modalId').scrollTop(0);
$('#modalId').scrollTop(0);
scrollTop()only returns the value; scrollTop(0)sets the value to 0 (all the way to the top)
scrollTop()只返回值；scrollTop(0)将值设置为 0（一直到顶部）
回答by BrunoLM
To scroll the page to the modal, select html, bodyand 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);
You can combine both to scroll the page and the modal to a visible area for the user if needed.
如果需要，您可以将两者结合起来将页面和模式滚动到用户的可见区域。
References
参考
回答by pampa pal
This is a solution without using JQuery, first you get your modal by the id and then, the function scrollIntoViewwill 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);
回答by Ignacio Ara
To avoid rough movement to the top I would prefer to use (animated movement):
为了避免粗暴地移动到顶部，我更喜欢使用（动画移动）：
$('#modalId').animate({
scrollTop : 0
}, 'slow');
回答by Satish N
<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>
回答by Satish N
You have to include "jquery-1.7.1.min.js" file in your page. http://code.jquery.com/jquery-1.7.1.min.js
您必须在页面中包含“jquery-1.7.1.min.js”文件。 http://code.jquery.com/jquery-1.7.1.min.js
