How to scroll to top in Ionic 5 Vue 3?

Ionic Framework Ionic Vue
1

How do I programmatically scroll to the top of my view?

ion-content: Ionic Framework API Docs has a method scrollToTop but I don’t understand how to call it in Ionic Vue. How do I access that method? $ionicScrollDelegate.scrollTop() is not available.

Thanks!

1 Like
2

Hi @metalaureate, today I found the solution how to use scrollToTop();

For angular docs it will be like this:
Ionic 5|4 How to Scroll to Top, Bottom, to Element with Ion Content Scroll Events « Freaky Jolly

import { IonContent as content } from '@ionic/vue'

const clickScroll = () => {
    console.log(content);
    content.scrollToTop() // this one will not working if you are working with vue 3
}

Above the code will not work with vue 3

after all, they will bind IonContent in static: false and call to scroll into IonContent;
But for vue, I don’t think so that will work. If I am using scrollIntoView instead of ‘scrollToTop’ or etc…
That still works, but not pretty good in IOS.

so the best solution is binding Element by using the code I figured out:
first thing you must bind something you able to call my own properties.

<ion-content class="bindingScrollContent" :scroll-events="true" :full-screens="true"></ion-content>

then in javascript or typescript, whatever you wanna use to write the code. For me, just simply using javascript.
Call a function when you click on that component:

const clickToTop = () => {
  const scrollContent = document.querySelector('ion-content.bindingScrollContent');
  scrollContent.scrollToTop(1000) // duration: 1000
}
1 Like
3

You should be grabbing a ref to the IonContent, then calling scrollToPoint on that reference:

<ion-content ref="myContent">...</ion-content>

const scrollThat = () => {
  myContent.value.$el.scrollToPoint(0, 100, 1000);
}
4

Great thanks. Is that explained anywhere?!

5

The Vue Quickstart guide has information on how to call methods on components: Ionic Vue Quickstart - Ionic Documentation

6

Ah, yup, see that now. Thank you.

7

Wondering how to do that within a child component !?