javascript - Nuxt.js: Como substituir o scrollBehaviour para uma única mudança de rota
Tenho uma página Nuxt onde faço scroll até ao topo em cada mudança de router. Definimos isto no nuxt.config.js
scrollBehavior (to, from, savedPosition) {
return ({ x: 0, y: 0 })
}
Agora tenho um único link de Navegação que é um pouco especial: «Contactos» não leva a uma nova página com apenas a informação de contacto, mas sim deve ir para o rodapé onde os detalhes de contacto estão escritos em todas as páginas. Então adicionei um link (não um nuxtlink) para ligar à âncora #contact no rodapé.
<a class="Submenu__link Submenu__link--contact" href="#contact">
Contact
</a>
Isto não funciona, no entanto, porque regista uma mudança de rota e volta a definir a página para o topo. (Pelo menos essa é a minha suposição). Tentei executar alguma função para definir a propriedade scrollTop, mas então vejo um tremor, onde roda um pouco mas depois é novamente definido para o topo:
<li class="Submenu__item">
<a @click="closeNavAndScroll" class="Submenu__link Submenu__link--contact" href="#contact">
Contact
</a>
</li>
E declarei um método (fechar a navegação funciona):
closeNavAndScroll () {
this.closeNavMenu()
window.scrollTop(400)
}
Então pensei em encontrar algumas informações aqui: https://nuxtjs.org/api/configuration-router#scrollBehavior
Mas pelo que consegui perceber, só existe uma declaração para definir o scrollBehaviour para todas as rotas. Há alguma forma de eu dizer que sempre que a rota incluir #contact eu não quero que a aplicação mexa na minha posição de scroll?
Obrigado por qualquer ajuda com isto.
Saúde
Resposta #1
Crie o seu #contact anchor como fez, mas altere o comportamento de scroll para lidar com ele:
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {selector: to.hash}
} else {
return {x: 0, y: 0}
}
}
