ScrollTo a section
I try to implement scroll to a section in Metronic Vue. What I did was editing the route/clean.ts and core/config/CleanMainMenuConfig.ts. But instead of scrolling to a section, it replace the body with the particular components. May I know how can I implement scroll to a section in Metronic Vue correctly?
{
path: "/",
redirect: "/",
component: () => import("@/layouts/main-layout/MainLayout.vue"),
meta: {
middleware: "auth",
},
children: [
{
path: "/home",
name: "home",
component: () => import("@/layouts/main-layout/MainLayout.vue"),
meta: {
pageTitle: "Home",
},
},
{
path: "/services",
name: "services",
component: () => import("@/components/dashboard/Service.vue"),
meta: {
pageTitle: "Services",
},
}
}
],
},
Replies (1)
Hi Jasmine,
Thank you for reaching out to us.
If you want to link a section on your page you do not need to register a new route for it.
You can have one page that has both your sections, and then you can link these sections by putting a hash with the section's ID to the route.
For example, on /dashboad page you can link your sections as shown in this gist file.
Before implementing this, remember to define the scrollBehavior in your router file:
const router = createRouter({
history: createWebHashHistory(),
routes,
scrollBehavior(to) {
if (to.hash) {
return {
el: to.hash,
top: 100,
behavior: "smooth",
};
}
},
});You can find a full router configuration code in this gist file.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
