Scrolling in iFrame on click using jquery

Question

I have a job application form that is pulled to another page using an iFrame. If the user clicks "Submit" and errors appear on the page, an overlay window (like the lightbox) appears, which gives the user a verification error message. It has an okay button, which then closes the window.

I would like the click of a button to return the user to the top of the page, since the iFrame is about 1000 pixels high. Again, all this happens in the iFrame. The iFrame popup will anchor you at the top of the iFrame. There is no cross-domain madness.

I would prefer to do this with jquery, since I already have the click function associated with the button, but if I absolutely need to use the old Javascript DOM methods, I will agree.

I tried scrollTo, animate by adding an anchor in the iFrame src, and nothing worked. I also had no mistakes to guide me. Any help would be greatly appreciated!

UPDATE

if(errors > 0) { var header = "It appears there was a problem!"; var message = "There are <b><u>"+errors+"</u></b> errors with your application.<br/><br/>"; message += "<b>Please re-attach your resume once you have corrected the errors.</b>"; jQuery("#infoMessage .infoText").html("<h2>"+header+"</h2><p>"+message+"</p>"); jQuery("#infoMessage button").button(); jQuery("button.okButton").click(function() { jQuery("#infoMessage").fadeOut(); jQuery(".light_overlay").fadeOut(); return false; //alert('testing'); // Do not use .scrollTop() as it is deprecated. jQuery('body').prop('scrollTop', 0); // Additionaly, animate it. jQuery('body').animate({ scrollTop: 0 }); }); jQuery("#infoMessage").fadeIn('slow'); jQuery(".light_overlay").fadeIn(); } 

This is the last piece of code that I was asked to add, and it did not work (4 lines after the warning with comments)

Answer 1

Suppose you are using jQuery, there are still things to keep in mind, much less than traditional JavaScript.

• When scrolling, use the "body" instead of the document.
• Use prop () to set scrollTop
• Always call event.preventDefault () if you are handling click events on anchors.

Code example:

 // Do not use .scrollTop() as it is deprecated. $('body').prop('scrollTop', 0); // Additionaly, animate it. $('body').animate({ scrollTop: 0 }); 

Answer 2

You can wrap the <iframe> with <div> and use the absolute position, and also set it top and left to 0. This will allow you to move the iframe to where you want, and also let you programmatically set the scroll position.

Here is an example: http://jsfiddle.net/BDC9Q/35/