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.
1 post - 1 participant
Read full topic
