Resolve "Jump to top in merge request"

3 files changed, 61 insertions, 0 deletions

diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 28148319c41..b0dc5697018 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -217,6 +217,28 @@ export default class MergeRequestTabs {
       }
 
       this.eventHub.$emit('MergeRequestTabChange', this.getCurrentAction());
+    } else if (action === this.currentAction) {
+      // ContentTop is used to handle anything at the top of the page before the main content
+      const mainContentContainer = document.querySelector('.content-wrapper');
+      const tabContentContainer = document.querySelector('.tab-content');
+
+      if (mainContentContainer && tabContentContainer) {
+        const mainContentTop = mainContentContainer.getBoundingClientRect().top;
+        const tabContentTop = tabContentContainer.getBoundingClientRect().top;
+
+        // 51px is the height of the navbar buttons, e.g. `Discussion | Commits | Changes`
+        const scrollDestination = tabContentTop - mainContentTop - 51;
+
+        // scrollBehavior is only available in browsers that support scrollToOptions
+        if ('scrollBehavior' in document.documentElement.style) {
+          window.scrollTo({
+            top: scrollDestination,
+            behavior: 'smooth',
+          });
+        } else {
+          window.scrollTo(0, scrollDestination);
+        }
+      }
     }
   }
 
diff --git a/changelogs/unreleased/52276-jump-to-top-in-merge-request.yml b/changelogs/unreleased/52276-jump-to-top-in-merge-request.yml
new file mode 100644
index 00000000000..3dc95441eec
--- /dev/null
+++ b/changelogs/unreleased/52276-jump-to-top-in-merge-request.yml
@@ -0,0 +1,5 @@
+---
+title: Allow user to scroll to top of tab on MR page
+merge_request:
+author:
+type: added
diff --git a/spec/javascripts/merge_request_tabs_spec.js b/spec/javascripts/merge_request_tabs_spec.js
index 7714197c821..c8df05eccf5 100644
--- a/spec/javascripts/merge_request_tabs_spec.js
+++ b/spec/javascripts/merge_request_tabs_spec.js
@@ -239,4 +239,38 @@ describe('MergeRequestTabs', function() {
       expect($('.content-wrapper')).toContainElement('.container-limited');
     });
   });
+
+  describe('tabShown', function() {
+    const mainContent = document.createElement('div');
+    const tabContent = document.createElement('div');
+
+    beforeEach(function() {
+      spyOn(mainContent, 'getBoundingClientRect').and.returnValue({ top: 10 });
+      spyOn(tabContent, 'getBoundingClientRect').and.returnValue({ top: 100 });
+      spyOn(document, 'querySelector').and.callFake(function(selector) {
+        return selector === '.content-wrapper' ? mainContent : tabContent;
+      });
+      this.class.currentAction = 'commits';
+    });
+
+    it('calls window scrollTo with options if document has scrollBehavior', function() {
+      document.documentElement.style.scrollBehavior = '';
+
+      spyOn(window, 'scrollTo');
+
+      this.class.tabShown('commits', 'foobar');
+
+      expect(window.scrollTo.calls.first().args[0]).toEqual({ top: 39, behavior: 'smooth' });
+    });
+
+    it('calls window scrollTo with two args if document does not have scrollBehavior', function() {
+      spyOnProperty(document.documentElement, 'style', 'get').and.returnValue({});
+
+      spyOn(window, 'scrollTo');
+
+      this.class.tabShown('commits', 'foobar');
+
+      expect(window.scrollTo.calls.first().args).toEqual([0, 39]);
+    });
+  });
 });