Whenever a qlist item is clicked by the user, it redirects to another page. However, the scrolled position from the previous page is retained and not set to the top. This means that the user has to manually scroll back to the top to view the contents of the newly navigated page. Below is the code snippet that is being utilized for this functionality:
Vue file
<q-item
@Click.native = "scrollToTop"
clickable
class="q-item__select"
active-class="q-item--active"
id="mainTemplate"
:to="{
path: '/project/' + this.project.Id.toString() + '/template',
}"
>
Typescript file (.ts)
public scrollToTop() {
window.scrollTo(0,0);
}
Routes configuration (routes.ts)
const routes = [
// PROJECT
// -----
{
path: 'project/:projectId',
name: 'project',
component: () => import('layouts/masterSlave.vue'),
props: {
master: () => import('pages/projects/project/projectDesktop.vue'),
},
children: [
{
path: 'architecture',
name: 'architecturePage',
component: () => import('src/pages/projects/project/sections/architecture.vue'),
props: {
slaveLevel: 1,
},
},
{
path: 'template',
name: 'templatePage',
component: () => import('src/pages/projects/project/sections/template.vue'),
props: {
slaveLevel: 1,
},
},
]
}
]