fix: Add scroll reset on payment select

ivpn · Apr 23, 2024 · 7eef3fa · 7eef3fa
1 parent bfd33c1
commit 7eef3fa
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/themes/ivpn-v3/assets/js/components/SelectPaymentMethod.vue b/src/themes/ivpn-v3/assets/js/components/SelectPaymentMethod.vue
@@ -23,6 +23,7 @@
                 tag="button"
                 class="btn btn-solid pay-button"
                 :to="{ name: 'add-funds-cc', params: { price: price.id } }"
+                @click.native="scrollToTop"
             >
                 <div class="credit-card-icon"></div>
                 Credit Card
@@ -31,6 +32,7 @@
                 tag="button"
                 class="btn btn-solid pay-button"
                 :to="{ name: 'add-funds-paypal', params: { price: price.id } }"
+                @click.native="scrollToTop"
             >
                 <div class="paypal-icon"></div>
                 PayPal
@@ -39,6 +41,7 @@
                 tag="button"
                 class="btn btn-solid pay-button"
                 :to="{ name: 'add-funds-bitcoin', params: { price: price.id } }"
+                @click.native="scrollToTop"
             >
                 <div class="bitcoin-icon"></div>
                 Bitcoin
@@ -47,6 +50,7 @@
                 tag="button"
                 class="btn btn-solid pay-button"
                 :to="{ name: 'add-funds-monero', params: { price: price.id } }"
+                @click.native="scrollToTop"
             >
                 <div class="monero-icon"></div>
                 Monero
@@ -55,6 +59,7 @@
                 tag="button"
                 class="btn btn-solid pay-button"
                 :to="{ name: 'add-funds-cash', params: { price: price.id } }"
+                @click.native="scrollToTop"
             >
                 <div class="cash-icon"></div>
                 Cash
@@ -113,6 +118,9 @@ export default {
         toggleMoreOptions() {
             this.more = !this.more;
         },
+        scrollToTop() {
+            window.scrollTo(0,0);
+        },
     },
 };
 </script>

diff --git a/src/themes/ivpn-v3/assets/js/views/Account/AddFunds.vue b/src/themes/ivpn-v3/assets/js/views/Account/AddFunds.vue
@@ -1,10 +1,10 @@
 <template>
     <div v-if="!isLight" class="payment-page-header">
         <div class="back-link">
-            <router-link :to="{ name: 'account' }" v-if="account.is_new">
+            <router-link :to="{ name: 'account' }" v-if="account.is_new" @click.native="scrollToTop">
                 <span class="icon-back"></span>Select payment method
             </router-link>
-            <router-link :to="{ name: 'payment' }" v-else>
+            <router-link :to="{ name: 'payment' }" v-else @click.native="scrollToTop">
                 <span class="icon-back"></span>Select payment method
             </router-link>
         </div>
@@ -74,6 +74,11 @@ export default {
             window.location = "/light";
         }
     },
+    methods: {
+        scrollToTop() {
+            window.scrollTo(0,0);
+        },
+    },
 };
 </script>