Nuxt.js scrollTo id onclick

Question

所以我正在构建一个 nuxt 应用程序，我希望页面在单击按钮后向下滚动到特定元素。按钮和元素在两个不同的组件中，但在同一个页面上。

所以我读到这是 Nuxt.js 中的一个问题，您必须创建一个特定的文件才能使其正常工作。

我创建了名为 app 的文件夹，并在 app 中创建了文件 router.scrollBehavior.js 文件代码如下

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 }
  }

我的按钮在 hero 文件中，我创建了一个名为 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
            
        }
    }

    }

我现在如何调用函数？让它发挥作用？

Answer 1

如果要使用router.scrollBehavior.js。设置路由器操作并将其发送到特定哈希：

methods: {
    goto() {
        this.$router.replace({ name: this.$route.name, hash: '#example' });          
    }
}

不要忘记在组件中设置 id。

<div id="example">
</div>

Nuxt.js scrollTo id onclick

Nuxt.js scrollTo id onclick

javascript

vue.js

nuxt.js

scrollto