feat: core-236 adding smoothScroll to disclaimers anchor click

kiva · Nov 12, 2021 · 1e5fcfa · 1e5fcfa
1 parent ecbbf0a
commit 1e5fcfa
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/src/components/WwwFrame/DisclaimersContentful.vue b/src/components/WwwFrame/DisclaimersContentful.vue
@@ -1,4 +1,4 @@
-s<template>
+<template>
 	<div class="row">
 		<ol id="disclaimers" class="text-left">
 			<li

diff --git a/src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircular.vue b/src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircular.vue
@@ -40,7 +40,7 @@
 					<h3 class="appeal-banner__title strong" v-html="headline"></h3>
 					<a
 						v-if="disclaimer"
-						href="#disclaimers"
+						@click="scrollToSection('#disclaimers')"
 						class="appeal-banner__disclaimer-indicator"
 						v-kv-track-event="['promo', 'click-Contentful-banner', 'disclaimer-superscript', '1']"
 					>
@@ -138,6 +138,7 @@
 <script>
 // import numeral from 'numeral';
 import smoothReflow from 'vue-smooth-reflow';
+import smoothScrollMixin from '@/plugins/smooth-scroll-mixin';
 
 import KvButton from '@/components/Kv/KvButton';
 import KvIcon from '@/components/Kv/KvIcon';
@@ -151,7 +152,7 @@ export default {
 		KvProgressCircle,
 		KvContentfulImg
 	},
-	mixins: [smoothReflow],
+	mixins: [smoothReflow, smoothScrollMixin],
 	props: {
 		targetAmount: {
 			type: Number,
@@ -217,6 +218,11 @@ export default {
 		onClickToggleBanner() {
 			this.$emit('toggle-banner', !this.isOpen);
 		},
+		scrollToSection(sectionId) {
+			const elementToScrollTo = document.querySelector(sectionId);
+			const topOfSectionToScrollTo = elementToScrollTo?.offsetTop ?? 0;
+			this.smoothScrollTo({ yPosition: topOfSectionToScrollTo, millisecondsToAnimate: 750 });
+		}
 	},
 	mounted() {
 		this.$smoothReflow();

diff --git a/src/components/WwwFrame/PromotionalBanner/Banners/GenericPromoBanner.vue b/src/components/WwwFrame/PromotionalBanner/Banners/GenericPromoBanner.vue
@@ -14,7 +14,7 @@
 		</component>
 		<a
 			v-if="hasDisclaimer"
-			href="#disclaimers"
+			@click="scrollToSection('#disclaimers')"
 			class="disclaimer-indicator"
 			v-kv-track-event="['promo', 'click-Contentful-banner', 'disclaimer-superscript', '1']"
 		>
@@ -27,11 +27,13 @@
 
 <script>
 import KvIcon from '@/components/Kv/KvIcon';
+import smoothScrollMixin from '@/plugins/smooth-scroll-mixin';
 
 export default {
 	components: {
 		KvIcon
 	},
+	mixins: [smoothScrollMixin],
 	props: {
 		iconKey: {
 			type: String,
@@ -49,6 +51,13 @@ export default {
 			}
 		},
 	},
+	methods: {
+		scrollToSection(sectionId) {
+			const elementToScrollTo = document.querySelector(sectionId);
+			const topOfSectionToScrollTo = elementToScrollTo?.offsetTop ?? 0;
+			this.smoothScrollTo({ yPosition: topOfSectionToScrollTo, millisecondsToAnimate: 750 });
+		}
+	},
 	computed: {
 		// if the promoBannerContent includes a link, render a router-link element, else render a plain div
 		currentWrapperComponent() {