minhnt-dev: scroll smooth

assets/styles/style.scss

@@ -20,6 +20,7 @@ $color-line: #EDEDED;
 body {
     font-size: 14px;
     font-family: $font-raleway;
+    scroll-behavior: smooth;
 }
 
 // %headings {

components/dynamic-page/page-component/templates/sections/articles/Default.vue

@@ -4,10 +4,7 @@ import { getInputValue } from "@/utils/parseSQL";
 import { enumPageComponentTemplates } from "@/definitions/enum";
 const router = useRouter();
 const route = useRoute();
-
+import { useScroll } from '@vueuse/core';
-const store = reactive({
-  component: useDynamicPageStore(),
-});
 
 const _props = defineProps<{
   dataResult?: any[];
@@ -108,10 +105,11 @@ const mapActivesToItems = (index: number) => {
   }
   return {};
 };
+
 </script>
 
 <template>
-  <section v-if="listArticleByCategory?.length > 0">
+  <section :id="`cpn_[${_props.component.id}]`" v-if="listArticleByCategory?.length > 0">
     <div class="section-container">
       <div class="section-layout" :style="designObject['div.section']">
         <template v-for="(component, index) in listArticlePaging?.length > 0 ? listArticlePaging : listArticleByCategory" :key="index">
@@ -126,13 +124,13 @@ const mapActivesToItems = (index: number) => {
           />
         </template>
         <div class="button-page flex">
-          <span class="btn-page prev-page" @click.stop="() => handleNextPrev('-')" v-if="page > 1">
+          <a :href="`#cpn_[${_props.component.id}]`" class="btn-page prev-page" @click.stop="() => handleNextPrev('-')" v-if="page > 1">
             <Icon name="ooui:previous-ltr"></Icon>
-          </span>
+          </a>
-          <span :class="['btn-page', page === index + 1 && 'active']" @click.stop="() => select(index + 1)" v-for="(_, index) in Math.ceil(totals / limit)">{{ index + 1 }}</span>
+          <a :href="`#cpn_[${_props.component.id}]`" :class="['btn-page', page === index + 1 && 'active']" @click.stop="() => select(index + 1)" v-for="(_, index) in Math.ceil(totals / limit)" :key="index">{{ index + 1 }}</a>
-          <span class="btn-page next-page" @click.stop="() => handleNextPrev('+')" v-if="page < Math.ceil(totals / limit)">
+          <a :href="`#cpn_[${_props.component.id}]`" class="btn-page next-page" @click.stop="() => handleNextPrev('+')" v-if="page < Math.ceil(totals / limit)">
             <Icon name="ooui:previous-rtl"></Icon>
-          </span>
+          </a>
         </div>
       </div>
     </div>

nuxt.config.ts

@@ -15,6 +15,10 @@ export default defineNuxtConfig({
     },
   },
 
+  plugins: [
+    '~/plugins/scroll.plugin',
+  ],
+
   modules: [
     '@nuxt/image',
     "@unocss/nuxt",

plugins/scroll.plugin.ts

@@ -0,0 +1,5 @@
+export default defineNuxtPlugin((nuxtApp : any) => {
+    nuxtApp.$router.options.scrollBehavior = () => {
+      return { left: 0, top: 0 }
+    }
+})