我在两页左右设计了一个长形式.在用户提交表单后,如果表单包含任何错误,我需要强制他/她查看表单的顶部.
我在表单顶部有一个错误持有者.
我的问题是如何使浏览器滚动到错误持有者,以便用户可以轻松地看到它？
谢谢
//////////////////////////////////////////跟随彼得的评论
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
// This is a functions that scrolls to the element with id id
function goToByScroll(id)
{
// Scroll
$('html,body').animate({
scrollTop: $(id).offset().top}, 'slow');
};
$(document).ready( function() {
debugger;
$('#clearhere').click(function() {
goToByScroll('topbar2');
});
});
</script>
</head>
<body>
<div id="topbar2">Hello world</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<div>DDDDDDDDDDDDDD</div>
<button type="button" id="clearhere" name="clearhere">Click Me!</button>
</body>
</html>
///////////////////////////////////////////
要滚动到顶部元素,只需使用jQuery .animate()和.offset()函数.例如,要使用作为参数传入的特定选择器(例如id)滚动到元素的顶部,请使用以下命令:
// This is a function that scrolls to the element that matches selector
function goToByScroll(selector){
// Scroll
$('html,body').animate({
scrollTop: $(selector).offset().top},
'slow');
};
例如,如果页面上只有一个表单,则可以使用:goToByScroll("form");.如果要滚动到具有特定id的元素,请使用goToByScroll("#myId");...等.
如果要将滚动时间调整为精确的毫秒数,只需用'slow'毫秒数替换,例如1000(无引号),滚动时间为1秒.
当您想要滚动到表单顶部时,只需触发上述功能即可.
这是一个实时的jsFiddle示例(作为5行jQuery插件)
您可以使用jQuery ScrollTo插件平滑地向上滚动到错误持有者:
// in your validation, on error
$(window).scrollTo($('#errorHolderId'), 500);
Sans插件
如果您不想使用插件,可以使用offset()或position()和scrollTop的组合来实现:
var errorHolderTop = $('#errorHolderId').offset().top;
$(window).scrollTop(errorHolderTop);
我提到偏移和位置的原因是因为它们的行为略有不同.偏移返回相对于文档的坐标,而位置相对于元素的偏移父级.
如果要创建平滑滚动效果,还可以为scrollTop属性设置动画:
var errorHolderTop = $('#errorHolderId').offset().top;
$('html, body').animate({scrollTop: errorHolderTop});