Ionic-vue scrollToTop not working

Ionic Framework Ionic Vue
1

I have a problem where I’ve added a scrollToTop button in my app and it works on the first page that I’m on for that app after a refresh. If I go to any other link in my app and click the button, it doesn’t scroll back to the top. Let’s say I refresh it on that different link then try again, it’ll work but only on that page.

This is my TabLayout.vue that I use across all pages on my app:

<template>
    <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <slot name="actions-start"></slot>
          <ion-back-button :default-href="pageDefaultBackLink" v-if="pageDefaultBackLink !== ''"></ion-back-button>
        </ion-buttons>
        <ion-title>
          <div class="ion-text-wrap pageTitle">
            {{title}}
          </div>
          </ion-title>
        <ion-buttons slot="end">
            <slot name="actions-end"></slot>
            <ScrollToTopButton/>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="false" class="bindingScrollContent" :scroll-events="true">
        <slot/>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButtons, IonBackButton} from '@ionic/vue';
import ScrollToTopButton from '@/components/usables/ScrollToTopButton.vue';

export default defineComponent({
    components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonButtons, IonBackButton, ScrollToTopButton },
    props: {
        title: {
            type: String,
            required: true
        },
        pageDefaultBackLink: {
            type: String,
            required: false
            // default: '/tabs/quran'
        },
    },
    setup() {
        return {};
    }
})
</script>

This is the ScrollToTopButton.vue:

<template>
    <div id="myBtn">
        <ion-button @click="scrollToTop">
            <ion-icon :icon="arrowUpCircleOutline" color="success"></ion-icon>
        </ion-button>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { IonButton, IonIcon } from '@ionic/vue'
import { arrowUpCircleOutline } from 'ionicons/icons';

export default defineComponent({
    components: {
        IonButton,
        IonIcon,
    },
    setup() {
        const content = ref();


        const scrollToTop = () => {
            let scrollContent = document.querySelector('ion-content.bindingScrollContent')!;
            scrollContent.scrollToTop(700);
            console.log('scrolled up')
            //content.value.scrollToTop(700);
            
        }

        return { arrowUpCircleOutline, scrollToTop };
    }
})
</script>

<style>

#myBtn {
  /* display: hidden; */
  cursor: pointer; /* Add a mouse pointer on hover */
  border-radius: 10px; /* Rounded corners */
  zoom: 1.1;
}
</style>

I’ve tried many things to no avail, if any help is appreciated, thanks.

2

Should you try using element.scrollTo(0, 0) instead of element.scrollToTop(700)? I’m not sure how it’s working even once.

But you also need to figure out a way for each new page loaded to register which element you want to scroll on. Seems like the original ion-content.bindingScrollContent element might be persisting in the DOM and always being the one scrolled.

3

This works for us, all pages go to the top.

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  scrollBehavior () {
    return { x: 0, y: 0 };
  },
  routes
});