diff --git a/src/app/components/MainContent.tsx b/src/app/components/MainContent.tsx
index 556a0c9544c..90484a3f157 100644
--- a/src/app/components/MainContent.tsx
+++ b/src/app/components/MainContent.tsx
@@ -13,6 +13,7 @@ interface Props {
   className?: string;
   dangerouslySetInnerHTML?: { __html: string; };
   textSize?: TextResizerValue;
+  doFocus?: boolean;
 }
 // tslint:disable-next-line:variable-name
 const ContentStyles = styled(({ textSize, ...props }) => <DynamicContentStyles {...props} />)`
@@ -29,6 +30,34 @@ const ContentStyles = styled(({ textSize, ...props }) => <DynamicContentStyles {
   }
 `;
 
+function InnerContent({
+  book,
+  children,
+  doFocus,
+  ...props
+}: React.PropsWithChildren<Omit<Props, 'className'>>) {
+  React.useEffect(
+    () => {
+      if (window && doFocus) {
+        window.document.querySelector('main')?.focus();
+        window.scrollTo(0, 0);
+      }
+    },
+    [doFocus]
+  );
+
+  return (
+    <ContentStyles
+      id={MAIN_CONTENT_ID}
+      book={book}
+      tabIndex={-1}
+      {...props}
+    >
+      {children}
+    </ContentStyles>
+  );
+}
+
 // tslint:disable-next-line:variable-name
 const MainContent = React.forwardRef<HTMLDivElement, React.PropsWithChildren<Props>>(
   ({book, children, className, ...props}, ref) => <Consumer>
@@ -37,14 +66,9 @@ const MainContent = React.forwardRef<HTMLDivElement, React.PropsWithChildren<Pro
       className={className}
       tabIndex={-1}
     >
-      <ContentStyles
-        id={MAIN_CONTENT_ID}
-        book={book}
-        tabIndex={-1}
-        {...props}
-      >
+      <InnerContent book={book} {...props}>
         {children}
-      </ContentStyles>
+      </InnerContent>
     </main>}
   </Consumer>
 );
diff --git a/src/app/content/components/Page/PageComponent.tsx b/src/app/content/components/Page/PageComponent.tsx
index da426581ff9..c577135df4a 100644
--- a/src/app/content/components/Page/PageComponent.tsx
+++ b/src/app/content/components/Page/PageComponent.tsx
@@ -37,6 +37,7 @@ export default class PageComponent extends Component<PagePropTypes> {
   private scrollToTopOrHashManager = stubScrollToTopOrHashManager;
   private processing: Array<Promise<void>> = [];
   private componentDidUpdateCounter = 0;
+  private doFocus = false;
 
   public getTransformedContent = () => {
     const {book, page, services} = this.props;
@@ -89,6 +90,7 @@ export default class PageComponent extends Component<PagePropTypes> {
     // per rerender. componentDidUpdate is called multiple times when user navigates quickly.
     const runId = this.getRunId();
 
+    this.doFocus = true;
     // If page has changed, call postProcess that will remove old and attach new listerns and start mathjax typesetting.
     if (prevProps.page !== this.props.page) {
       this.postProcess();
@@ -97,8 +99,6 @@ export default class PageComponent extends Component<PagePropTypes> {
     // Wait for the mathjax promise set by postProcess from previous or current componentDidUpdate call.
     await Promise.all(this.processing);
 
-    this.scrollToTopOrHashManager(prevProps.scrollToTopOrHash, this.props.scrollToTopOrHash);
-
     const searchHighlightsChanged = !isEqual(
       prevProps.searchHighlights.searchResults,
       this.props.searchHighlights.searchResults
@@ -123,6 +123,7 @@ export default class PageComponent extends Component<PagePropTypes> {
     });
 
     lazyResources.checkLazyResources();
+    this.scrollToTopOrHashManager(prevProps.scrollToTopOrHash, this.props.scrollToTopOrHash);
   }
 
   public onHighlightSelect: HighlightUpdateOptions['onSelect'] = (selectedHighlight) => {
@@ -171,6 +172,7 @@ export default class PageComponent extends Component<PagePropTypes> {
         ref={this.container}
         dangerouslySetInnerHTML={{ __html: html}}
         textSize={this.props.textSize}
+        doFocus={this.doFocus}
       />
       {this.props.children}
     </React.Fragment>;
diff --git a/src/app/content/components/Page/scrollToTopOrHashManager.ts b/src/app/content/components/Page/scrollToTopOrHashManager.ts
index 4f0a2f12a67..61cc3b6ef16 100644
--- a/src/app/content/components/Page/scrollToTopOrHashManager.ts
+++ b/src/app/content/components/Page/scrollToTopOrHashManager.ts
@@ -36,9 +36,7 @@ const scrollToTargetOrTop = (container: HTMLElement | null, hash: string, previo
 
 const scrollToTop = () => {
   const window = assertWindow();
-  const document = window.document;
 
-  document.querySelector('main')?.focus();
   window.scrollTo(0, 0);
 };