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="welcomeImage">
<img src="/assets/welcomeBacking.jpg" alt=""/>
<IonCardHeader>
<IonCardTitle>Welcome!</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.