fix(docs): fix scroll selector to scroll to top on page change (#4364)

patternfly · Nov 15, 2024 · c0a0c26 · c0a0c26
1 parent 9008740
commit c0a0c26
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 47 deletions.
diff --git a/packages/documentation-framework/components/link/link.js b/packages/documentation-framework/components/link/link.js
@@ -16,13 +16,7 @@ const Promiseany = (
   }
 ).bind(Promise);
 
-export const Link = ({
-  href,
-  to,
-  onMouseOver = () => {},
-  onClick,
-  ...props
-}) => {
+export const Link = ({ href, to, onMouseOver = () => {}, onClick, ...props }) => {
   let preloadPromise;
   let url = href || to || '';
   if (url.startsWith('#') && !onClick) {
@@ -54,14 +48,12 @@ export const Link = ({
           if (!(ev.ctrlKey || ev.metaKey)) {
             // avoid disallowing cmnd/ctrl+click opening in new tab
             ev.preventDefault();
-            document
-              .querySelector('.pf-v6-c-page__main-container')
-              .scrollTo({ top: 0 }); // scroll to top of page
             if (typeof window !== 'undefined' && url !== location.pathname) {
-              Promiseany([
-                preloadPromise,
-                new Promise((res) => setTimeout(res, 500)),
-              ]).then(() => navigate(url));
+              Promiseany([preloadPromise, new Promise((res) => setTimeout(res, 500))])
+                .then(() => navigate(url))
+                .then(() => {
+                  document.querySelector('#ws-page-main').scrollTo({ top: 0 }); // scroll to top of page
+                });
             }
           }
         };

diff --git a/packages/documentation-framework/components/tableOfContents/tableOfContents.js b/packages/documentation-framework/components/tableOfContents/tableOfContents.js
@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-  JumpLinks,
-  JumpLinksItem,
-  JumpLinksList,
-} from '@patternfly/react-core';
+import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core';
 import { trackEvent } from '../../helpers';
 
 export const TableOfContents = ({ items }) => {
@@ -14,9 +10,7 @@ export const TableOfContents = ({ items }) => {
 
   React.useEffect(() => {
     if (document.getElementById('ws-sticky-nav-tabs')) {
-      setStickyNavHeight(
-        document.getElementById('ws-sticky-nav-tabs').offsetHeight
-      );
+      setStickyNavHeight(document.getElementById('ws-sticky-nav-tabs').offsetHeight);
     }
   }, []);
 
@@ -40,13 +34,7 @@ export const TableOfContents = ({ items }) => {
               className="ws-toc-item"
               onKeyDown={updateWidth}
               onMouseDown={updateWidth}
-              onClick={() =>
-                trackEvent(
-                  'jump_link_click',
-                  'click_event',
-                  curItem.id.toUpperCase()
-                )
-              }
+              onClick={() => trackEvent('jump_link_click', 'click_event', curItem.id.toUpperCase())}
             >
               {curItem.text}
             </JumpLinksItem>
@@ -74,13 +62,7 @@ export const TableOfContents = ({ items }) => {
                 className="ws-toc-item"
                 onKeyDown={updateWidth}
                 onMouseDown={updateWidth}
-                onClick={() =>
-                  trackEvent(
-                    'jump_link_click',
-                    'click_event',
-                    curItem.id.toUpperCase()
-                  )
-                }
+                onClick={() => trackEvent('jump_link_click', 'click_event', curItem.id.toUpperCase())}
               >
                 {curItem.text}
               </JumpLinksItem>
@@ -95,17 +77,9 @@ export const TableOfContents = ({ items }) => {
             className="ws-toc-item"
             onKeyDown={updateWidth}
             onMouseDown={updateWidth}
-            onClick={() =>
-              trackEvent(
-                'jump_link_click',
-                'click_event',
-                item.id.toUpperCase()
-              )
-            }
+            onClick={() => trackEvent('jump_link_click', 'click_event', item.id.toUpperCase())}
           >
-            {Array.isArray(nextItem)
-              ? renderSublist(item, nextItem)
-              : item.text}
+            {Array.isArray(nextItem) ? renderSublist(item, nextItem) : item.text}
           </JumpLinksItem>
         );
       }
@@ -117,7 +91,7 @@ export const TableOfContents = ({ items }) => {
     <JumpLinks
       label="Table of contents"
       isVertical
-      scrollableSelector=".pf-v6-c-page__main-container"
+      scrollableSelector="#ws-page-main"
       className="ws-toc"
       style={{ top: stickyNavHeight }}
       offset={width > 1450 ? 108 + stickyNavHeight : 148 + stickyNavHeight}