Moving to next page stays at the bottom of the page

[gallbrook]

When clicking through to the next page of results, user isn't returned to the top of the page, and so users are forced to scroll back to the top, which is not good.

To see this behaviour - go to https://search-ui-stable.netlify.app/?size=n_20_n click "2" to go to the next page of results. Still at the bottom of the page.

Ideally we should scroll back to the top of the page, when paging through results.

[JasonStoltz]

That's a good suggestion, thank you.

[marcvangend]

I did something like that by adding an onChange handler to the PagingView component:

  const onChangeThenScroll = function(...args) {
    onChange(...args);
    window.setTimeout(() => {
      window.location.hash = '#search-results';
    }, 300);
  };

This makes it jump up to the dom element with id="search-results". Unfortunately I had to add a timeout because otherwise that element has not been rendered yet. It's not the most beautiful solution but I hope it will help someone else.

[PrabhdeepSingh]

I did something similar to @marcvangend but opted in using react-scroll which has a <Link component outputs an anchor tag but instead of jumping to the hash it scrolls to it. And it has a .scrollTo('elementId') func if you don't want to use the <Link component.

[SumiSastri]

A better option add middleware and intercept response pass a custom function to the response - in the docs, see section Using middleware in Connector Handlers

• Handler implementations can also be used as middleware for Connectors by leveraging the next function. Here the custom function enables a scroll back to the top of the page by using the global window object.

window.scrollTo({
      top: 0,
      behavior: "smooth",
    });

The handler can be customised with the relevant types like so:

onSearch: async (state: RequestState,
    queryConfig: QueryConfig,
    next: (
      state: RequestState,
      queryConfig: QueryConfig
    ) => Promise<ResponseState>
  ) => {
    const response = await next(state, queryConfig);
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
    return response;
  },