Plans: scroll to the top when moving between pages (#45933)

Automattic · Sep 28, 2020 · 4d984bd · 4d984bd
1 parent fb98c8e
commit 4d984bd
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/client/my-sites/plans-v2/details.tsx b/client/my-sites/plans-v2/details.tsx
@@ -3,7 +3,7 @@
  */
 import { useTranslate } from 'i18n-calypso';
 import page from 'page';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 /**
@@ -60,6 +60,10 @@ const DetailsPage = ( {
 	const translate = useTranslate();
 	const isLoading = useIsLoading( siteId );
 
+	useEffect( () => {
+		window.scrollTo( 0, 0 );
+	}, [] );
+
 	// If the product slug isn't one that has options, proceed to the upsell.
 	if ( ! ( PRODUCTS_WITH_OPTIONS as readonly string[] ).includes( productSlug ) ) {
 		page.redirect( getPathToUpsell( rootUrl, productSlug, duration as Duration, siteSlug ) );

diff --git a/client/my-sites/plans-v2/upsell.tsx b/client/my-sites/plans-v2/upsell.tsx
@@ -3,7 +3,7 @@
  */
 import page from 'page';
 import { useTranslate } from 'i18n-calypso';
-import React, { ReactNode, useCallback, useMemo } from 'react';
+import React, { ReactNode, useCallback, useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 
 /**
@@ -87,6 +87,10 @@ const UpsellComponent = ( {
 		[ upsellSlug ]
 	);
 
+	useEffect( () => {
+		window.scrollTo( 0, 0 );
+	}, [] );
+
 	return (
 		<Main className="upsell" wideLayout>
 			{ header }