Link to section within an embedded page's content

Question

I have a Microsoft Word document exported as a web page that I need to be displayed as contents for a help page in my browser-based system. This help page includes a table of contents and a simplified search engine, all of which will involve linking to sections of the document. Right now, we've the basic functionality nailed down with the general form below:

<!-- Our code -->
<a href="#heading">Heading Name</a>
<div>Summary of section</div>

<!-- Exported from Word -->
<div id="heading">Heading Name</div>
<div>Section content</div>

In the above implementation, we are directly modifying the exported document. For maintainability, we want to move our code to a separate page and embed the exported document inside this new page, either using <embed> or <iframe> . That way, changes to code and changes to the Word document's content can be made independent of and without affecting the other. For example:

<!-- Our code -->
<a href="#heading">Heading Name</a>
<div>Summary of section</div>

<iframe>
  <!-- iframe contents - document exported from Word -->
  ...
  <div id="heading">Heading Name</div>
  <div>Section content</div>
  ...
</iframe>

How can I get the linking to work again?

Answer 1

U can assign ID for iframe

<iframe id="heading">

Or u can use JS and using offset().top function for scroll to needed position on click.