I'm trying to add in a button which scrolls to the top of the page, using Ionic React. This is part of my code so far -

...
function scrollToTop() {
    return document.getElementById("page")!.scrollTop;
}

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
            <IonButtons slot="start">
                <IonMenuButton />
            </IonButtons>
            <IonTitle slot="end">Ionic Template - JB</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent id={"page"}>
        <IonCard  className="weleImage">
            <img src="/assets/weleBacking.jpg" alt=""/>
            <IonCardHeader>
                <IonCardTitle>Wele!</IonCardTitle>
                <IonCardSubtitle>To this Ionic Template</IonCardSubtitle>
            </IonCardHeader>
            <IonCardContent>
                Lorem ipsum........
            </IonCardContent>
        </IonCard>
        {/*Checklist*/}
        <IonList>
            {form.map(({val, isChecked, isDisabled}) => (
                <IonItem key={val}>
                    <IonLabel>{val}</IonLabel>
                    <IonCheckbox slot={"start"} value={val} checked={isChecked} disabled={isDisabled} />
                </IonItem>
                ))}
        </IonList>
          <IonButton onClick={scrollToTop}>Scroll to top</IonButton>
      </IonContent>
    </IonPage>
  );
};

The scrollToTop function should scroll to the to the top of the element with id 'page' but tis doesn't. I don't get any errors when clicking the button, instead nothing at all happens.

I know this is a trivial thing to implement in Angular but I'm having trouble using React for this. Any help would be great thanks.

I'm trying to add in a button which scrolls to the top of the page, using Ionic React. This is part of my code so far -

...
function scrollToTop() {
    return document.getElementById("page")!.scrollTop;
}

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
            <IonButtons slot="start">
                <IonMenuButton />
            </IonButtons>
            <IonTitle slot="end">Ionic Template - JB</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent id={"page"}>
        <IonCard  className="weleImage">
            <img src="/assets/weleBacking.jpg" alt=""/>
            <IonCardHeader>
                <IonCardTitle>Wele!</IonCardTitle>
                <IonCardSubtitle>To this Ionic Template</IonCardSubtitle>
            </IonCardHeader>
            <IonCardContent>
                Lorem ipsum........
            </IonCardContent>
        </IonCard>
        {/*Checklist*/}
        <IonList>
            {form.map(({val, isChecked, isDisabled}) => (
                <IonItem key={val}>
                    <IonLabel>{val}</IonLabel>
                    <IonCheckbox slot={"start"} value={val} checked={isChecked} disabled={isDisabled} />
                </IonItem>
                ))}
        </IonList>
          <IonButton onClick={scrollToTop}>Scroll to top</IonButton>
      </IonContent>
    </IonPage>
  );
};

The scrollToTop function should scroll to the to the top of the element with id 'page' but tis doesn't. I don't get any errors when clicking the button, instead nothing at all happens.

I know this is a trivial thing to implement in Angular but I'm having trouble using React for this. Any help would be great thanks.

• javascript
• reactjs
• ionic-framework
• scroll
• ionic4

Share Improve this question Follow asked Nov 6, 2019 at 12:27 James BrightmanJames Brightman 93522 gold badges1414 silver badges2424 bronze badges 2

• you can use scroll(0,0) it will scroll to the top of the page !! – Beginner Commented Nov 6, 2019 at 12:51
• Unfortunately this still doesn't do anything - maybe the id needs to be moved to another Ionic tag? – James Brightman Commented Nov 6, 2019 at 13:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 15

You can do this with scrollToTop method of IonContent, but you have to enable scrollEvents first. In ionic react, the methods can be accessed using refs. Doesn't look much reacty but at least this works for now.

........    
import React, {useRef} from 'react';

const Home: React.FC = (props) => {
    const contentRef = useRef<HTMLIonContentElement | null>(null);
    const scrollToTop= () => {
        contentRef.current && contentRef.current.scrollToTop();
    };
    return (
        .....
        <IonContent ref={contentRef} scrollEvents={true}>
            ................
            <IonButton onClick={()=>scrollToTop()}>Scroll to top</IonButton>
        </IonContent>
        .....
    );
};

export const waitForElement = <K extends keyof HTMLElementTagNameMap>(
  sel: K,
  cb: (el: HTMLElementTagNameMap[K]) => void
) => {
  const el = document.querySelector(sel)

  if (!el || !el.offsetHeight) {
    requestAnimationFrame(() => waitForElement(sel, cb))
  } else {
    cb(el)
  }
}
//Use this function to scroll top.
export function scrollTop() {

  waitForElement("ion-content", (contentEl) => {
    if (contentEl) {
      contentEl.scrollToTop()
    }
  })
}