Member Avatar for Sprogg

Hello,
I have a very annoying problem with which i would be grateful of any advice.
I have installed an autosize iframe on my page and everything works fine until i add extra content below my navigation menu.
After adding the extra content ( red image) the page will not refresh to the top when a link is clicked.

A Demo can be found at:

Thanks in advance for any help offered.

  • 2 Contributors
  • 2 Replies
  • 97 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by Sprogg

Dani AI

Generated

The red image below the nav likely made the parent page tall enough to scroll. When your nav loads content into an iframe the parent page does not reload, so its scroll position is preserved — the iframe can appear "not refreshed to the top" even though its content is new. 's idea touched on vertical alignment, but that does not control the page scroll; already confirmed that attribute was present.

Checklist and simple fixes:

  • Confirm whether nav links target the iframe (target attribute or JS). If they do, force the parent to scroll to the top when a nav link is clicked. Example (replace the target name with yours):
document.querySelectorAll('a[target="contentFrame"]').forEach(function(a){
  a.addEventListener('click', function(){ window.scrollTo(0, 0); });
});
  • If you can edit the iframe content and it is same-origin, have the iframe tell the parent to scroll on load:
window.addEventListener('load', function(){
  window.parent.scrollTo(0, 0);
});
  • If the iframe is cross-origin, use postMessage from the child to request a scroll, and validate origins in the parent listener:
/* iframe (child) */
window.top.postMessage('scroll-top', 'https://your-parent-origin');

/* parent */
window.addEventListener('message', function(ev){
  if (ev.origin !== 'https://your-parent-origin') return;
  if (ev.data === 'scroll-top') window.scrollTo(0, 0);
});

Also check your autosize callback: if the script resizes the iframe after a load, call the scroll-to-top inside that callback to avoid race conditions or flicker. See MDN for details on window.scrollTo and postMessage for secure messaging: Window.scrollTo and Window/postMessage.

Recommended Answers

All 2 Replies

Member Avatar for MidiMagic

add align="top" to the iframe tag.

Member Avatar for Sprogg

add align="top" to the iframe tag.

Hi MidiMagic align="top" is already included in the iframe tag

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.