Jquery - Move To Top Of Page When Button Clicked Inside Of An Iframe

I have a .html with a standard form that lives within an iFrame. The form gets filled and then submitted with a submit button at the bottom of the form. The resulting action occurs

Solution 1:

I suppose that your iframe and your main page are on the same domain.

Try this:

window.parent.scrollTo(0,0);

window.parent is the window of your main page while window is your current iframe's window.

DEMO

If your iframe and your window are on different domains, you cannot access window.parent directly like this. You need to use window.postMessage to communicate.

If you use jQuery, you could try this plugin.

The idea is when the button inside the iframe is clicked, the iframe will post a message to the parent page. The parent page listening to that event will be notified and scrolls itself to top. Sample code using window.postMessage in your case (not tested):

DOMAIN1.COM/index.html:

$(function () {
     $("#btnSubmit").bind('click', function (event) {
            window.postMessage("scrollTop","http://domain2.com");
     });
});

DOMAIN2.COM/index.html:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  if (event.origin !== "http://domain1.com")
    return;

  if (event.data == "scrollTop"){
      window.scrollTo(0,0);
  }
}

Solution 2:

I am not sure but you must use :-

$(window).animate({scrollTop: $("body").offset().top}, 500);

instead of

$('html, body').animate({scrollTop: $("body").offset().top}, 500);

Solution 3:

try the below

window.parent.$("body").animate({scrollTop:0}, 'slow'); 

Keep in mind that the iframe and the body should be able to communicate. Meaning, they both should share the same domain. Say parent is abc.xyz.com the iframe cant be abc1.xyz1.com.