Jquery – Issue with scrolling to second section containing iframe on page reload

I have a website where I’m using an iframe from a third-party company. The iframe is placed within a div with the ID "iframe". The problem I’m facing is that when the user clicks on any button in the iframe it reloads my whole page, the scroll position resets to the top. As a result, the user needs to scroll down again to see the updated content, which is not ideal. Additionally user doesn’t even suspect that something has happened, because the iframe is placed into the second section of website.

I’ve tried using JavaScript to scroll to the second section containing the iframe after it finishes loading. However, I haven’t been successful so far.

And I’m not certain if it was the right approach. I’ve attempted to use this code (it was provided by other person). But after iFrame is reloaded the new position is set to "0":

    Saved scroll position: 0
    Iframe reloaded

Probably the code must be triggered only on a lick in the iFrame, the links have some common patterns in the beginning.

Here’s the code I’m currently using:

window.onload = function() {
  var iframeContainer = document.getElementById("iframe");
  var iframe = iframeContainer.querySelector("iframe");
  var iframeSrc = iframe.getAttribute("src");

  console.log("Page loaded");

  // Check if there is a stored scroll position in the URL and restore it
  var scrollPosition = getScrollPositionFromUrl();
  if (scrollPosition) {
    window.scrollTo(0, scrollPosition);
    console.log("Restored scroll position:", scrollPosition);
  }

  // Save the scroll position in the URL when the user scrolls
  window.addEventListener("scroll", function() {
    var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
    setScrollPositionToUrl(scrollPosition);
    console.log("Saved scroll position:", scrollPosition);
  });

  // Modify the iframe code to remove scroll position from the URL on reload
  iframe.addEventListener("load", function() {
    removeScrollPositionFromUrl();
    console.log("Iframe reloaded");
  });

  // Function to retrieve scroll position from URL
  function getScrollPositionFromUrl() {
    var hash = window.location.hash;
    if (hash) {
      var scrollPosition = parseInt(hash.substring(1));
      if (!isNaN(scrollPosition)) {
        return scrollPosition;
      }
    }
    return null;
  }

  // Function to set scroll position to URL
  function setScrollPositionToUrl(scrollPosition) {
    var hash = "#" + scrollPosition;
    history.replaceState(null, null, hash);
  }

  // Function to remove scroll position from URL
  function removeScrollPositionFromUrl() {
    history.replaceState(null, null, window.location.pathname);
  }
};

I would appreciate any help on how to resolve this issue. How can I ensure that the page automatically scrolls to the second section containing the iframe after it finishes loading? Thank you in advance for your assistance!

UPDATE

I have simplified the approach: try to check if the URL contains a common pattern and then manipulate the scroll position accordingly (use a hash link). However, this approach did not work consistently, and the scroll position was not properly restored after a page reload.

What is important, I discovered that the main page does not reload completely when a link within an iframe is clicked. So main page’s URL is updated with the new address after iFrame reload and scroll is taking me to top. As a result, the code I implemented did not have a chance to execute when the URL changed.

Here what I have tried:

window.addEventListener("load", function() {
  var iframeContainer = document.getElementById("iframe");
  var iframe = iframeContainer.querySelector("iframe");
  var commonUrlPattern = "/?step=index/step3"; // Update the common URL pattern as needed

  console.log("Page loaded");

  // Check if the URL contains the common pattern and the iframe has loaded
  if (window.location.href.includes(commonUrlPattern)) {
    console.log("Common URL pattern found");
    scrollToSection();
  }

  // Function to scroll to the custom section
  function scrollToSection() {
    // Replace 'section-id' with the actual ID of the section you want to scroll to
    var sectionId = "section-id";
    var sectionElement = document.getElementById(sectionId);
    if (sectionElement) {
      sectionElement.scrollIntoView({ behavior: "smooth" });
    }
  }

  // Listen for iframe load event to track URL changes within the iframe
  iframe.addEventListener("load", function() {
    console.log("Iframe loaded");
    var iframeUrl = iframe.contentWindow.location.href;
    if (iframeUrl.includes(commonUrlPattern)) {
      console.log("Common URL pattern found within iframe");
      scrollToSection();
    }
  });
});