Scroll to search query on result pagessearch-result-scroll

4 files changed, 30 insertions, 2 deletions

diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 751c5b18..ebaa60bd 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -20,6 +20,11 @@ body {
   }
 }
 
+h2,
+h3,
+h4,
+h5,
+h6,
 :target {
   scroll-margin-top: $header-height + 1rem;
 }
diff --git a/content/frontend/search/google.js b/content/frontend/search/google.js
index 153ef650..b13e6b49 100644
--- a/content/frontend/search/google.js
+++ b/content/frontend/search/google.js
@@ -1,8 +1,9 @@
 /* global Vue */
 import GoogleSearchForm from './components/google_search_form.vue';
-import { activateKeyboardShortcut } from './search_helpers';
+import { activateKeyboardShortcut, scrollToQuery } from './search_helpers';
 
 document.addEventListener('DOMContentLoaded', () => {
+  scrollToQuery();
   activateKeyboardShortcut();
 
   const { isHomepage } = document.querySelector('body').dataset;
diff --git a/content/frontend/search/search_helpers.js b/content/frontend/search/search_helpers.js
index 744d7302..9197f715 100644
--- a/content/frontend/search/search_helpers.js
+++ b/content/frontend/search/search_helpers.js
@@ -118,3 +118,25 @@ export const activateKeyboardShortcut = () => {
     document.querySelector('input[type="search"]').focus();
   });
 };
+
+/**
+ * If the search query is included in a heading,
+ * scroll down to it.
+ */
+export const scrollToQuery = () => {
+  const { qParam } = getSearchParamsFromURL();
+  if (!qParam) return;
+
+  const word = qParam.toLowerCase();
+  const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
+
+  for (const heading of headings) {
+    if (heading.innerText.toLowerCase().includes(word)) {
+      // If we matched the page title, no need to scroll.
+      if (heading.tagName === 'H1') break;
+
+      // Otherwise, if it's a match, smooth scroll down to it.
+      heading.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
+};
diff --git a/content/frontend/services/google_search_api.js b/content/frontend/services/google_search_api.js
index c0b81b0e..3d34a3d2 100644
--- a/content/frontend/services/google_search_api.js
+++ b/content/frontend/services/google_search_api.js
@@ -37,7 +37,7 @@ export const fetchResults = async (query, filters, pageNumber, numResults) => {
         .replace(' ...', '')
         .replaceAll('`', '')
         .trim(),
-      relativeLink: item.link.replace('https://docs.gitlab.com/', '/'),
+      relativeLink: `${item.link.replace('https://docs.gitlab.com/', '/')}?query=${query}`,
       breadcrumbs: item.pagemap.metatags[0]['gitlab-docs-breadcrumbs'] ?? '',
     }));
   }