From eb85cde726f3ecdb53294065b72a2208e26d02e3 Mon Sep 17 00:00:00 2001
From: Renzo Canepa <rcanepag@gmail.com>
Date: Fri, 25 Sep 2020 10:52:01 -0300
Subject: [PATCH] Scroll to the top when moving between pages

---
 client/my-sites/plans-v2/details.tsx | 6 +++++-
 client/my-sites/plans-v2/upsell.tsx  | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/my-sites/plans-v2/details.tsx b/client/my-sites/plans-v2/details.tsx
index 30724ec1f4e0b..a0a74b1fec8e8 100644
--- 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';
 
 /**
@@ -53,6 +53,10 @@ const DetailsPage = ( { duration, productSlug, rootUrl, header }: DetailsPagePro
 	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
index 0a4c546d38d19..09174b73b98f9 100644
--- 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 }