Ionic-vue scrollToTop not working

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:

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

<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 {};

This is the ScrollToTopButton.vue:

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

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

export default defineComponent({
    components: {
    setup() {
        const content = ref();

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

        return { arrowUpCircleOutline, scrollToTop };


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

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

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.

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 };