How to anchor scroll to bottom of parent document from within iFrame container?

Question

I have no ability to modify the parent document. I want to do this within the iFrame container by targeting an attribute in the parent. Both have the same origin. I did this in jQuery but if it's easier in Vanilla JS, please let me know.

The attribute I'm trying to target in the parent document is: data-cvent-id="widget-EventCountdownTimer-widget:c3946469-3420-4028-ad3a-a31ef109f1a2"

  $(".page-header ul a").on("click", function (e) {
  // 1
  e.preventDefault();
  // 2
  const href = $(this).attr("href");
  // 3
  window.parent.$('html, body').animate({ scrollTop: $(href).offset().top }, 800);
   });


<div class="container">
  <header class="page-header">
    <nav>
          <a href="#widget-EventCountdownTimer-widget:c3946469-3420-4028-ad3a-a31ef109f1a2">Test</a>
    </nav>

Any guidance or tips would be appreciated!