CODEWITHSUNDEEP
javascripthtml
Nick Kahn
Nick Kahn

Reputation: 20078

Force webpage to load at the top of the page

I have an html page with a couple of IFrame loading through external source code. I have no control over the external resources.

When the webpage loads it focuses on the one of the IFrame instead of focusing at the top of the page.

Here is my simple html page:

<html>
   <head>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
      <div id="topp" tabindex="0"></div>
   </head>
   <div id="topp" tabindex="0"></div>
   <body>
      <p id="test">test 1 2 3 4.</p>
      <br><br>
      <h2>IFrame 1</h2>
      <iframe src="https://..../index1.html" width="100%" height="825px;"></iframe>
      <iframe src="https://..../index2.html" width="100%" height="825px;"></iframe>
      <iframe src="https://..../index3.html" width="100%" height="825px;"></iframe>
      <iframe src="https://..../index4.html" width="100%" height="825px;"></iframe>
   </body>
</html>

It's focusing on Iframe index3.html, so I have tried to create workaround by including in the page body text some javascript. In this way I can force the page to scroll back to the top as the DOM is being rendered. But it is not working.

Here is what I have tried:

$(document).ready(function(){
    $(this).scrollTop(0);
});

Is there a way to find wheter the IFrame loads all the SRC, and then focus on top of the page?

Upvotes: 3

Views: 2873

Answers (1)

Eze Geremi Matthew
Eze Geremi Matthew

Reputation: 19

You can replace your JavaScript code with:

window.scrollTo(0, 0);

That line of code will force the page to scroll to the top after loading.

You can add smooth scrolling with this code: 

window.scroll({
  top: 0, 
  left: 0, 
  behavior: 'smooth',
});

I hope this helps.

Upvotes: 1

Related Questions