fix: Scroll page when html anchor tag clicked

This PR changes the default function of HTML anchor tags that focus on another element on the page. Previously the anchor tags that were set to scroll on the page to another element would open the link outside of the iframe and redirect the parent page. As a result, users would have to have to click the back arrow to navigate back to the course and continue the unit. Now when the anchor tag is used to focus it and send the location of the focus element to the parent page to scroll to the correct location. This change will impact the Learner in the New Experience view.

Jira issue: TNL-8312

lms/templates/courseware/courseware-chromeless.html

@@ -133,9 +133,24 @@ ${HTML(fragment.foot_html())}
         var newWidth = contentElement.offsetWidth;
 
         if (eventType !== 'load' && newWidth === lastWidth && newHeight === lastHeight) {
+            // Monitor when any anchor tag is clicked, it is checked to make sure
+            // it is referencing an element's id (not an external website). If
+            // the href attribute is an id, the location of the selected focus
+            // element is sent through its offset attribute. The offset will
+            // allow the page to scroll to the location of the focus element so
+            // that it is at the top of the page.
+
+            $('a').on("click", function(event){
+              if ($(this).attr('href')[0] === "#") {
+                event.preventDefault()
+                var targetId = $(this).attr('href')
+                window.parent.postMessage({"offset": $(targetId).offset().top}, document.referrer)
+              }
+            })
           return;
         }
 
+
         window.parent.postMessage({
             type: 'plugin.resize',
             payload: {