jQuery-使DIV在浏览器上可见_Jquery

jQuery-使DIV在浏览器上可见

jquery

jQuery-使DIV在浏览器上可见,jquery,Jquery,我设计了一个大约两页的长表单。在用户提交表单后，如果表单包含任何错误，我需要强制他/她查看表单顶部我在表单顶部有一个错误保持器我的问题是如何使浏览器滚动到错误保持器，以便用户可以轻松地看到它多谢各位 ///////////////////////////////////////////跟随彼得的评论 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

我设计了一个大约两页的长表单。在用户提交表单后，如果表单包含任何错误，我需要强制他/她查看表单顶部

我在表单顶部有一个错误保持器

我的问题是如何使浏览器滚动到错误保持器，以便用户可以轻松地看到它

多谢各位

///////////////////////////////////////////跟随彼得的评论

<!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
//这是一个滚动到id为的元素的函数
函数goToByScroll（id）
{
//卷轴
$（'html，body'）。设置动画({
scrollTop:$（id）.offset（）.top}，'slow'）；
};
$（文档）.ready（函数（）{
调试器；
$（'#clearhere'）。单击（函数（）{
戈托比斯克罗尔（“topbar2”）；
});
});
你好，世界
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
dddddddddddddddd
点击我！

///////////////////////////////////////////

您可以使用jQuery平滑地向上滚动到错误保持器：

// in your validation, on error
$(window).scrollTo($('#errorHolderId'), 500);

Sans插件

如果您不想使用插件，可以结合使用或和：

我之所以提到偏移量和位置，是因为它们的行为略有不同。偏移量返回相对于文档的坐标，而位置是相对于元素的偏移父元素的坐标

如果要创建平滑滚动效果，还可以设置scrollTop属性的动画：

var errorHolderTop = $('#errorHolderId').offset().top;
$('html, body').animate({scrollTop: errorHolderTop});

要滚动到元素顶部，只需使用jQuery和函数即可。例如，要滚动到作为参数传入的特定选择器（如id）的元素顶部，请执行以下操作：

例如，如果页面上只有一个表单，则可以使用：

goToByScroll（“表单”）。如果要滚动到具有特定id的元素，请使用goToByScroll（“#myId”）。。。等等
如果要将滚动时间调整为精确的毫秒数，只需将'slow'
替换为毫秒数，例如1000
（无引号）滚动1秒
当您想要滚动到表单顶部时，只需触发上述函数
（）
你好，彼得，我试过这个方法。然而，这对我不起作用。firebug报告：ErrorCopy$（id）中断。offset（）为空you@q0987-什么是身份证？你是如何调用这个函数的？听起来有点问题。看看我是如何在JSFIDLE示例中调用函数的。我已经使用firebug进行调试，它会如上所述报告错误。感谢you@q0987goToByScroll（“#topbar2”）。注意散列符号。必须使用文本jQuery选择器调用该函数。我在这里得到了你的代码：你好，彼得，非常感谢你的帮助。只是好奇，为什么选择使用$（'html，body'）.animate而不仅仅是$（'html'）.animate。我发现$（'body'）。animate对我不起作用。谢谢你好帕特，有没有办法让我不用使用额外的插件？感谢you@q0987当然，请看我的编辑，了解一些不同的方法。你好，帕特，这里很有趣。您和Peter都使用$（'html，body'），而不仅仅是$（'html'）。有什么原因吗？感谢you@q0987跨浏览器兼容性，我的好人。一些浏览器想要滚动html
元素，另一些浏览器想要滚动主体
goToByScroll（“#topbar2”）。注意散列符号。必须使用文本jQuery选择器调用该函数。以下是您的代码：
var errorHolderTop = $('#errorHolderId').offset().top;
$('html, body').animate({scrollTop: errorHolderTop});

  // This is a function that scrolls to the element that matches selector
function goToByScroll(selector){
      // Scroll
    $('html,body').animate({
        scrollTop: $(selector).offset().top},
        'slow');
};