From 3cf541cc76afa23046f20e061eed6346ada7025f Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Wed, 16 Jun 2021 12:43:56 -0500
Subject: [PATCH] fix: Autoscroll on page when using jump_to_id (#27952)

This PR changes the default function of HTML anchor tags that focus on
another element on a different page in the course. Previously the anchor
tags that were set to scroll on a different page would open up the page
but remain at the top of the page. As a result, users would have to
manually scroll to the correct part of the page if that information is
known or they will read the entire page. Now when the anchor tag is used
to focus on a different page, the link of the new page is checked for a
hash and sends the location of the hash to the parent page to scroll to
the correct location. This change will impact the Learner in the New
Experience view.
---
 .../courseware/courseware-chromeless.html        | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/lms/templates/courseware/courseware-chromeless.html b/lms/templates/courseware/courseware-chromeless.html
index 6ed4460f78..6439963d24 100644
--- a/lms/templates/courseware/courseware-chromeless.html
+++ b/lms/templates/courseware/courseware-chromeless.html
@@ -153,7 +153,21 @@ ${HTML(fragment.foot_html())}
             })
           return;
         }
-
+        // Monitor for messages and checks if the message contains an id. If
+        // there is an id, then 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. Unique ids and names are required for
+        // proper scrolling.
+        window.addEventListener('message', function (event) {
+          if (event.data.hashName) {
+            var targetId = event.data.hashName;
+            var targetName = event.data.hashName.slice(1);
+            // Checks if the target uses an id or name to focus and gets offset.
+            var targetOffset = $(targetId).offset() || $(document.getElementsByName(targetName)[0]).offset();
+            window.parent.postMessage({ 'offset': targetOffset.top }, document.referrer);
+          }
+        })
 
         window.parent.postMessage({
             type: 'plugin.resize',