How can I make the browser scroll to the top after submitting a form in a frame.

Question

I have a page with an iframe. In the iframe is a form targeting that frame. The submit button is down near the bottom but the results page is short and appears at the top. So when the user hits submit, the form disappears but they don't see the results because they are scrolled down too far.

Instead of just putting a bunch of whitespace in the results page, I'd like for the view to be readjusted. Is there a way to do this when the user hits submit?

Answer 1

Try this:

<form onsubmit="parent.scrollTo(0, 0); return true"> ...

I have no idea how cross-browser compatible that is.

Answer 2

Call a javascript function like the following on form submit:

function ScrollTop(){
        if (document.all){
        document.body.scrollLeft = 0;
        document.body.scrollTop = 0;
        }
    else{
        window.pageXOffset = 0;
        window.pageYOffset = 0;
        }
}

Answer 3

You can do that using jquery :

http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12

Prototype:

$(element).scrollTo();

http://www.prototypejs.org/api/element/scrollto

You'll just need to access the element in your iframe.

Hope that helps

edit: since it's libraries you will avoid cross browsers/compatibility issues