smooth scroll

app.vue

@@ -26,9 +26,9 @@ const reviews = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'clien
 const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'delivery')
 const products = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'products')
 
-const aboutText = computed(() => marked.parse(about?.content))
-const deliveryText = computed(() => marked.parse(delivery?.content))
-const productsText = computed(() => marked.parse(products?.content))
+const aboutText = computed(() => marked.parse(about?.content || ''))
+const deliveryText = computed(() => marked.parse(delivery?.content || ''))
+const productsText = computed(() => marked.parse(products?.content || ''))
 
 const { data: footerData } = await useFetch<ApiFooterType[]>(`${apiBase}/footer/?ordering=small_text`)
 const { data: social_networkData } = await useFetch<ApiSocial_networkType[]>(`${apiBase}/social_network/`)
@@ -38,6 +38,15 @@ const isModalOpen = useState('modal_open', () => false)
 const toggleModal = () => {
   isModalOpen.value = !isModalOpen.value
 }
+
+const { scrollToAnchor, scrollToTop } = useAnchorScroll({
+  toTop: {
+    scrollOptions: {
+      behavior: 'smooth',
+      offsetTop: 0,
+    }
+  },
+})
 </script>
 <template>
   <div>
@@ -48,7 +57,8 @@ const toggleModal = () => {
         </div>
         <div class="menu">
           <template v-for="item in pagesData">
-            <NuxtLink :to="item.external_link || `#${item.slug}`" :target="item.external_link ? '_blank' : '_self'">
+            <NuxtLink :to="item.external_link || `#${item.slug}`" :target="item.external_link ? '_blank' : '_self'"
+              @click="scrollToAnchor(item.slug)">
               {{ item.menu_title }}
             </NuxtLink>
           </template>
@@ -110,7 +120,7 @@ const toggleModal = () => {
       <CalcValues />
       <CalcModels />
     </div>
-    <div class="siteblock bg-white">
+    <div class="siteblock bg-white" id="delivery">
       <div class="container">
         <div class="prose col-span-6 whitespace-break-spaces">
           <span v-html="deliveryText"></span>
@@ -120,7 +130,7 @@ const toggleModal = () => {
         </div>
       </div>
     </div>
-    <div class="footer">
+    <div class="footer" id="contacts">
       <div class="container">
         <div class="k-logo">
           <k_logo />

nuxt.config.ts

@@ -7,6 +7,7 @@ export default defineNuxtConfig({
     "nuxt-icon",
     "nuxt-svgo",
     '@tresjs/nuxt',
+    'nuxt-anchorscroll',
   ],
   runtimeConfig: {
     public: {

package-lock.json

@@ -16,6 +16,7 @@
         "@types/marked": "^6.0.0",
         "marked": "^12.0.2",
         "nuxt": "^3.11.2",
+        "nuxt-anchorscroll": "^1.0.3",
         "nuxt-svgo": "^4.0.1",
         "ral-hex-converter": "^1.0.1",
         "sass": "^1.77.4",
@@ -10300,6 +10301,14 @@
         }
       }
     },
+    "node_modules/nuxt-anchorscroll": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/nuxt-anchorscroll/-/nuxt-anchorscroll-1.0.3.tgz",
+      "integrity": "sha512-f/1XzEvaolgsh+V0CgutcJozlBE5iLkp+oF7z/ZJCYMXQrTrPmpe8HnM8WlxTLHjAdFw09jx7dQ5oGQwHZt5tw==",
+      "dependencies": {
+        "@nuxt/kit": "^3.5.2"
+      }
+    },
     "node_modules/nuxt-icon": {
       "version": "0.6.10",
       "resolved": "https://registry.npmjs.org/nuxt-icon/-/nuxt-icon-0.6.10.tgz",

package.json

@@ -19,6 +19,7 @@
     "@types/marked": "^6.0.0",
     "marked": "^12.0.2",
     "nuxt": "^3.11.2",
+    "nuxt-anchorscroll": "^1.0.3",
     "nuxt-svgo": "^4.0.1",
     "ral-hex-converter": "^1.0.1",
     "sass": "^1.77.4",