Así que estoy creando una aplicación nuxt, y quiero que la página se desplace hacia abajo hasta un elemento específico, después de hacer clic en un botón. El botón y el elemento están en dos componentes diferentes, pero en la misma página.

Así que leí que este es un problema en Nuxt.js y tienes que crear un archivo específico para que funcione.

Creé la carpeta llamada aplicación y en la aplicación creé el archivo router.scrollBehavior.js el código del archivo es el siguiente

 export default async function (to, from, savedPosition) { if (savedPosition) { return savedPosition } const findEl = (hash, x) => { return document.querySelector(hash) || new Promise((resolve, reject) => { if (x > 50) { return resolve() } setTimeout(() => { resolve(findEl(hash, ++x || 1)) }, 100) }) } if (to.hash) { const el = await findEl(to.hash) if ('scrollBehavior' in document.documentElement.style) { return window.scrollTo({ top: el.offsetTop, behavior: 'smooth' }) } else { return window.scrollTo(0, el.offsetTop) } } return { x: 0, y: 0 } }

Mi botón está en el archivo de héroe, creé una función de clic llamada goto()

 <template> <section class="hero-section"> <div class="left"> <header id="hero-text" class="hero-header"> <h1 @click="goto()">Web Development <br> Web Design</h1> <p>Hi, ich bin Alex. Ich designe und programmiere moderne, kreative und schnelle Webseiten. Umgesetzt mit den neusten Technologien.</p> </header> <UiButtonApp id="hero-btn" text="Schau dir meine Arbeit an!" /> </div> <div class="right"> <img id="hero-img" src="~/assets/img/hero-img.jpg" alt="hero-img"> <div id="hero-object"></div> <img class="dots" id="hero-dots" src="~/assets/img/dots.png" alt="logo"> </div> </section> </template> <script> import { gsap } from "gsap"; export default { data(){ return{ } }, methods: { goto() { //what code to put here } } }

¿Cómo puedo llamar ahora a la función? ¿Y hacer que funcione?