Why doesn't JQuery scroll to the first DOM element after a given event is fired?

Question

When a user submits form "x", the form goes through a JavaScript validation and error messages are placed underneath any elements that have errors. This is the last section of my code that places the errors:

errorElement: "span",
errorClass: "field-validation-error",
errorPlacement: function (error, element) {
error.insertAfter(element.closest('div'));}

When the user clicks submit and all the errors are placed, the page does not move from where the user had it. I want the page to scroll to the first error on the page so the user can clearly see what he did wrong.

This is probably way wrong but I tried something like this underneath the code above:

var position = element.position;
$.scrollTop(position.top);

Why doesn't this work?

possible duplicate: [How to scroll the window using JQuery $.scrollTo() function?](http://stackoverflow.com/questions/832860/how-to-scroll-the-window-using-jquery-scrollto-function?rq=1) — Alexander, Jul 25 '12 at 20:38

VulgarBinary · Accepted Answer · 2012-07-26T20:40:05.810

Depending on what your "element" is you can simply do (Assuming element is a JQuery object already):

http://api.jquery.com/position/

and

http://api.jquery.com/scrollTop/

$(window).scrollTop(element.position().top);

Keep in mind if element is already a JQuery object you don't need to do $(element). If element is not a jquery object it needs to be the ID or unique selector to return to that element.

Edit: Animation Support

http://api.jquery.com/animate/

$(window).animate({"scrollTop": element.position().top});

Edit: Address picking an element from comments

Your other options are to give your error elements all the same class, this way you could always (when completed) scroll to the first error on the page.

var scrollPosition = Number($(".common-error-class:first").position.top);

Then from there you only have to invoke the window to scroll:

$(window).scrollTop(scrollPosition);

Edit: Verified working example

//The line you are focusing on
$(window).scrollTop($("input:last").position().top);

The full html file:

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <script type="text/javascript" src="/Scripts/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#triggerScroll").on("click", function () {
                $(window).scrollTop($("input:last").position().top);
            });
        });
    </script>

</head>

<body>
    <button id="triggerScroll">Scroll</button>
    <div class="container">

<h2>Index</h2>

<form action="/Request/InvokeAction" method="post">    <input type="hidden" name="ActionID" value="10" />

<div class="editor-label"><label for="FirstName">FirstName</label></div>

<div class="editor-field"><input class="text-box single-line" id="FirstName" name="FirstName" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span></div>

<div class="editor-label"><label for="LastName">LastName</label></div>

<div class="editor-field"><input class="text-box single-line" id="LastName" name="LastName" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true"></span></div>

<div class="editor-label"><label for="Company">Company</label></div>

<div class="editor-field"><input class="text-box single-line" id="Company" name="Company" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="Company" data-valmsg-replace="true"></span></div>

<div class="editor-label"><label for="BirthMonth">BirthMonth</label></div>

<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-number="The field BirthMonth must be a number." data-val-required="The BirthMonth field is required." id="BirthMonth" name="BirthMonth" type="number" value="" /> <span class="field-validation-valid" data-valmsg-for="BirthMonth" data-valmsg-replace="true"></span></div>

<div class="editor-label"><label for="BirthDay">BirthDay</label></div>

<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-number="The field BirthDay must be a number." data-val-required="The BirthDay field is required." id="BirthDay" name="BirthDay" type="number" value="" /> <span class="field-validation-valid" data-valmsg-for="BirthDay" data-valmsg-replace="true"></span></div>

<div class="editor-label"><label for="BirthYear">BirthYear</label></div>

<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-number="The field BirthYear must be a number." data-val-required="The BirthYear field is required." id="BirthYear" name="BirthYear" type="number" value="" /> <span class="field-validation-valid" data-valmsg-for="BirthYear" data-valmsg-replace="true"></span></div>

<div class="editor-label"><label for="BirthDate">BirthDate</label></div>

<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-date="The field BirthDate must be a date." data-val-required="The BirthDate field is required." id="BirthDate" name="BirthDate" type="datetime" value="" /> <span class="field-validation-valid" data-valmsg-for="BirthDate" data-valmsg-replace="true"></span></div>

<div class="editor-label"><label for="Email">Email</label></div>

<div class="editor-field"><input class="text-box single-line" id="Email" name="Email" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span></div>

    <div style="clear: both;"></div>

    <button type="submit">Submit</button>

</form>

    </div>

</body>

</html>

Hmm these didn't seem to work either. Is there anyway I could use the errorClass with scrollTop()? Or give the errors an id? — user1489322, Jul 26 '12 at 20:00
first and foremost debug as you would... 1 of 2 ways: var topPosition = element.position().top; debugger; //or alert(topPosition) Then make sure the output is what you would expect. If the output is showing "###px" do: $(window).scrollTop(Number(topPosition)) or whatever. That code works, I've used it, am currently using it... now it's just a matter of debugging your objects.. Without more code or a output dump of what your object looks like I cannot offer much more assistance past, debug... it works, I know it works as I pulled that straight from production examples. — VulgarBinary, Jul 26 '12 at 20:09
added a fully working example. Copy the code and start from there to build out what you need. It works in it's current state so keep mutating to get to where you need it to be and then copy and paste into your actual project. I'm sorry I can't be of much further assistance, providing the full working copy you can take as-is and use is about as specific as I can get without taking your entire project source code and writing it myself. — VulgarBinary, Jul 26 '12 at 20:58
PS: Once you get this working accepting the answer would be greatly appreciated. (As you're a new user with 1 reputation I thought I'd mention this HUGE pet peeve of mine ;-)) — VulgarBinary, Jul 26 '12 at 21:00

score 1 · Answer 2 · answered Jul 25 '12 at 20:40

1

The problem is that you're using element.position instead of element.position(). Position is a jQuery function, not a property.

answered Jul 25 '12 at 20:40

ErikE

48,881
23
151
196

Why doesn't JQuery scroll to the first DOM element after a given event is fired?

2 Answers2