CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
Ritz Arlekar
Ritz Arlekar

Reputation: 385

window.scrollTo not working when used in iframe

I have a continue button on my page where when a user clicks I call a validate function and if there are any errors on the page I show them on top and scroll to them with window.scrollTo(0,0);

Now, this page is loaded in an iframe and the window.scrollTo(0,0); doesn't work. I tried all possible ways like window.parent.scrollTo(0,0); or $('#error_msg_smry').animate({ scrollTop: 0 }, 0);, but nothing works.

Below is my code (error message div below):

<div id="error_msg_smry" class="error_msg_summary" style="display:none;" >
    <br/>
    <div class="error_msg_heading">Sorry, but we cannot process your donation until the following errors have been fixed:</div>
    <div>&nbsp;</div>
    <div class="error_messages">
        <div id="selDonationErr" class="textClass" style="color:#b94a48; font-weight:400;"></div> 
        <div id="otherAmtErr" class="textClass" style="color:#b94a48; font-weight:400;"></div>
        <div id="lessDonationErr" class="textClass" style="color:#b94a48; font-weight:400;"></div>
        <div id="recipientErr" class="textClass" style="color:#b94a48; font-weight:400;"></div>
        <div id="firstNameErr" class="textClass" style="color:#b94a48; font-weight:400;"></div>
        <div id="lastNameErr" class="textClass" style="color:#b94a48; font-weight:400;"></div>
        <div id="emailErr" class="textClass" style="color:#b94a48; font-weight:400;"></div>
        <div id="creditCardNameErr" class="textClass" style="color:#b94a48; font-weight:400;"></div>
        <div id="creditCardNumberErr" class="textClass" style="color:#b94a48; font-weight:400;"></div>
        <div id="creditCardExpiryMonthErr" class="textClass" style="color:#b94a48; font-weight:400;"></div>
        <div id="creditCardExpiryYearErr" class="textClass" style="color:#b94a48; font-weight:400;"></div>
        <div id="creditCardCCVErr" class="textClass" style="color:#b94a48; font-weight:400;"></div>
    </div>
    <br/>
</div>

The button below:

<apex:commandButton styleclass="btn" action="{!makeDonation}" onClick="return validate();" value="Continue"/>

And in my validate function I do the following:

if(isPass == false){
    document.getElementById("error_msg_smry").style.display = 'block';
    window.scrollTo(0,0);
}

I don't have access on the parent page (outside of my iframe).
Can anyone please help me

Upvotes: 0

Views: 1541

Answers (1)

Ritz Arlekar
Ritz Arlekar

Reputation: 385

Posting my answer if anyone facing the same issue and looking for a solution:

I resolved it writing below code:

  if(isPass == false){
                    document.getElementById("error_msg_smry").style.display = 'block';
                    // window.scrollTo(0,0);

                    var div = document.createElement("div");
                      div.innerHTML = "<a style='position:absolute;left:0;top:0px' href='#'></a>";
                      div = div.firstChild;
                      document.body.appendChild(div);
                      div.focus();
                      div.parentNode.removeChild(div);
                 }
                else{
                   document.getElementById("error_msg_smry").style.display = 'none';
                }

                return isPass;
            }

Upvotes: 2

Related Questions