Cannot scroll to top when navigating between components

Ionic Framework Ionic React
1

I have some help pages in my app. The route looks like this:

          <Route exact path={`${routeTabHelp}/:helpCode`}>
            <HelpDisplayIndex />
          </Route>

Here is HelpDisplayIndex, which uses react-query to fetch a JSON object that contains all the pages of help documentation.:

const HelpDisplayIndex: React.VFC = () => {
  const platform = useContext(PlatformContext);
  const { data } = useHelpPages(platform);

  return (
    <Suspense fallback={<Loading />}>
      <PageHelp data={data} />
    </Suspense>
  );
};

export default React.memo(HelpDisplayIndex);

And then PageHelp, which uses useParams to fetch the page code from the query string in the URL, which is also the key to the page data in the JSON object fetched by react-query in HelpDisplayIndex above:

const PageHelp: React.VFC<MyProps> = ({
  data,
}: MyProps) => {
  const { helpCode } = useParams<{ helpCode: string }>();

  // If verifyNot404 fails, it returns a 404 page.
  const page = verifyNot404(helpCode, data);
  useIonViewDidEnter(() => {
    const selector = `ion-content.${helpCode}`;
    const body = document.querySelector(selector);
    if (body) {
      body.scrollIntoView();
      console.log('scrolled!');
    }
  }, [helpCode]);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton />
          </IonButtons>
          <IonTitle>{ page.title }</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className={`${classesPageWithBodyText} ${helpCode}`}>
        { page.body }
        <ToolbarHelp pageFeedsCode={helpCode} helpPageData={data} />
      </IonContent>
    </IonPage>
  );
};

export default PageHelp;

Here, <ToolbarHelp> contains next and previous links between the help pages.

The problem is that when I navigate between help pages using the next and previous links, I am not returned to the top of the page. Instead, after pressing the button, I am usually at the bottom of the page, or half-way down a long page.

In console.log(), I can see that useIonViewDidEnter() is firing, and I see the scrolled! output. So it seems that something is preventing the page from scrolling.

Does Ionic block scrolling somehow? I want the user to always start at the top of the page when a page is loaded; it makes no sense to click a “next” button and then be sent to the middle of the next page.

2

I mostly fixed this by changing how I generate the route.

New PageHelp:

const PageHelp: React.VFC<MyProps> = ({
  data,
}: MyProps) => (
  <IonPage>
    <IonRouterOutlet>
      {data && data.map((item) => (
        <Route key={item.code} exact path={`${routeTabHelp}/${item.code}`}>
          <PageHelpContent key={item.code} data={data} />
        </Route>
      ))}
    </IonRouterOutlet>
  </IonPage>
);

And then PageHelpContent:

const PageHelpContent: React.VFC<MyProps> = ({
  data,
}: MyProps) => {
  const location = useLocation();
  const helpPageId = getPageCodeFromHelpUrl(location.pathname);

  // If verifyNot404 fails, it returns a 404 page.
  const page = verifyNot404(helpPageId, data);

  return (
    <>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton />

I cannot use <IonPage> inside <PageHelpContent>, because doing so will break the scrolling. (I will not be returned to the top of the page when scrolling between pages.

By doing it this way, I lose the back button from Ionic because there are no <IonPage> anymore, but I am scrolled back to the top of the page every time I navigate, which is more important.