Persist scroll position in the Help Center

packages/help-center/src/components/help-center-content.tsx

@@ -16,6 +16,7 @@ import { v4 as uuidv4 } from 'uuid';
  */
 import { useHelpCenterContext } from '../contexts/HelpCenterContext';
 import { useSupportStatus } from '../data/use-support-status';
+import { useArticleScrollPosition } from '../hooks/use-scroll-position';
 import { HELP_CENTER_STORE } from '../stores';
 import { HelpCenterArticle } from './help-center-article';
 import { HelpCenterChat } from './help-center-chat';
@@ -58,6 +59,10 @@ const HelpCenterContent: React.FC< { isRelative?: boolean; currentRoute?: string
 	const { data: openSupportInteraction, isLoading: isLoadingOpenSupportInteractions } =
 		useGetSupportInteractions( 'help-center' );
 	const isUserEligibleForPaidSupport = data?.eligibility.is_user_eligible ?? false;
+	const scrollPosition = useArticleScrollPosition(
+		containerRef,
+		location.pathname.includes( '/post' )
+	);
 
 	useEffect( () => {
 		recordTracksEvent( 'calypso_helpcenter_page_open', {
@@ -108,8 +113,15 @@ const HelpCenterContent: React.FC< { isRelative?: boolean; currentRoute?: string
 
 	useEffect( () => {
 		if ( containerRef.current && ! location.hash && ! location.pathname.includes( '/odie' ) ) {
-			containerRef.current.scrollTo( 0, 0 );
+			if ( location.pathname.includes( '/post' ) && scrollPosition > 0 ) {
+				containerRef.current.style.scrollBehavior = 'unset';
+				containerRef.current.scrollTo( 0, scrollPosition );
+				containerRef.current.style.scrollBehavior = 'smooth';
+			} else {
+				containerRef.current.scrollTo( 0, 0 );
+			}
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to run this on scroll
 	}, [ location ] );
 
 	return (

packages/help-center/src/hooks/use-scroll-position.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Persist the value in memory so when the element is unmounted it doesn't get lost.
+ */
+let cachedScrollPosition = 0;
+
+/**
+ * Persists the scroll position of an element in memory and returns it.
+ * @param ref the HTML element to track the scroll position of.
+ * @param enabled to only enable for article pages.
+ * @returns the current or last recorded scroll position.
+ */
+export function useArticleScrollPosition( ref: React.RefObject< HTMLElement >, enabled: boolean ) {
+	const [ scrollPosition, setScrollPosition ] = useState( cachedScrollPosition );
+
+	useEffect( () => {
+		const element = ref?.current;
+
+		const handleScroll = () => {
+			if ( element ) {
+				setScrollPosition( ( cachedScrollPosition = ref.current.scrollTop ) );
+			}
+		};
+		if ( enabled ) {
+			element?.addEventListener( 'scroll', handleScroll );
+		}
+		return () => {
+			element?.removeEventListener( 'scroll', handleScroll );
+		};
+	}, [ ref, enabled ] );
+
+	return scrollPosition;
+}