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"

<script> 
$(".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);});   
</script> 

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