On clicking the <IonBackButton />, The scroll-bar goes to the bottom of <IonList />

Hello everyone,

I am using the <IonBackButton /> on a page, and when I click on it to return the main page who is an <IonList />, the ScrollBar goes automatically to the bottom of the <IonList />.
And I want it, to stands as it was at the last time, before opening the page who contains the <IonBackButton />.

Thanks for your helps.

You could try using the IonViewDidEnter hook.

I also did something similar with the “Next” and “Prev” buttons in my app:

    onClick={() => {

const scrollToPageTop = (): void => {
  const body = document.querySelector('ion-content');
  if (body) {
      block: 'start',
      behavior: getScrollBehavior(),

const getScrollBehavior = (): ScrollBehavior => {
  const prefersReducedMotion = getPrefersReducedMotion();
  if (prefersReducedMotion) {
    return 'auto';
  return 'smooth';

// https://www.joshwcomeau.com/react/prefers-reduced-motion/
const getPrefersReducedMotion = (): boolean => {
  const mediaQuery = '(prefers-reduced-motion: no-preference)';
  const mediaQueryList = window.matchMedia(mediaQuery);
  const prefersReducedMotion = !mediaQueryList.matches;
  return prefersReducedMotion;

There are a couple extra functions I use to make sure that users who have the “reduced motion” accessibility setting enabled on their devices do not get smooth scrolling.

Hello @ptmkenny,

Thank you very much for your response and your help.
Does this code will solve the problem on my example ? I think this code is on another situation isn’t ?

Can you provide a more complete example, this shouldn’t be happening. I have a sample project that does not have this issue

This is my code snippet, and thank you for your code example, its seems like mine. Hope you can help me.

/** Home.tsx **/
{data.length > 0 ? (
        <IonList style={{ marginTop: '100px' }}>
            {data.map((obj: any) =>
                    onClick={() => setShowToast({ isShown: true, objSelected: obj.name })}
                    <IonThumbnail slot='start'>
                        <IonImg src={obj.image} />                    
                        <h2 style={{ fontSize: '14px' }}>
                    <IonNote slot='end'>

            onIonInfinite={(ev: CustomEvent<void>) => searchNext(ev)}
            threshold='50px' //'100px'
                loadingText='Loading more data...'                 
) : (      
    <h4 style={{ marginTop: '125px', color: 'red' }}>
      <b>No data found to show.</b>

/** RouteParams Interface **/
export interface RouteParams {
    filmID: string;

/** filmDetails **/
const filmDetails: React.FC = () => {
  const history = useHistory();
  const { filmID } = useParams<RouteParams>();

  return (
          <IonButtons slot='start'>
            <IonBackButton />
            <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
            <IonCardTitle>Card Title</IonCardTitle>

            bla bla bla.

export default filmDetails;

Can you put that into a demo app and push it to github?

Hello @mhartington,

I will put a video record :record_button: of the problem.

Hello @mhartington,

I have sent you a private message, with a Google Drive link to the video record :record_button: showing the issue.

Thanks in advance.

Just post the video here. I don’t review my private messages.

Hello @mhartington ,

This is the link: video-record-issue-backbtn-auto-scroll-ionlist

Thanks in advance.