Question

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

我在表单顶部有一个错误持有者。

我的问题是如何让浏览器滚动到错误持有者，以便用户可以轻松看到它？

谢谢

///////////////////////////////////////////跟随彼得的评论< / p>

<!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>

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

Answer 1

要滚动到顶部元素，只需使用jQuery .animate()和.offset()函数即可。例如，使用作为参数传入的特定选择器（例如id）滚动到元素的顶部，use this：

  // 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秒。

如果要滚动到表单顶部，只需触发上述功能即可。

Here's a live jsFiddle example（as a 5 line jQuery plugin）

Answer 2

您可以使用jQuery ScrollTo plugin顺利滚动回错误持有者：

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

无插件

如果您不想使用插件，可以使用offset()或position()和scrollTop的组合来执行此操作：

var errorHolderTop = $('#errorHolderId').offset().top;
$(window).scrollTop(errorHolderTop);

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

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

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

In action here

jQuery - 在浏览器上显示DIV

2 个答案: