Question

我想实现一个按钮，该按钮可自动滚动到位于同一页面上的特定div id="contactMe"。我正在使用vue.js。

我用本机js尝试了以下方法。

    <input
        onClick="document.getElementById('contactMe').scrollIntoView();"
        type="submit"
        class="cta-button bg-yellow mt-8 flex justify-center"
        :value="$frontmatter.contactFormButton"
      />

但是，我在控制台中收到以下错误。

未捕获的TypeError：无法读取null的属性'scrollIntoView' 在HTMLInputElement.onclick（（index :: 1）

vue框架中正确的命令是什么？

Answer 1

不要使用input[type="submit"]，因为它只应提交form。一个简单的button就可以处理正确的Vue事件：

new Vue({
  el: '#app',
  data: {
    buttonText: 'Lorem'
  },
  methods: {
    scroll() {
      const element = document.getElementById('contact-me');
      element.scrollIntoView({ behavior: 'smooth' });
    }
  }
})

body {
  background: #20262E;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

#contact-me {
  margin-top: 2000px;
  margin-bottom: 2000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button @click="scroll">{{ buttonText }}</button>
  
  <div id="contact-me">
    contact me box
  </div>
</div>

Answer 2

有一个名为vue-scrollto的软件包，它为您提供了一种更方便的滚动处理方式。

new Vue({
  el: '#app',
  methods: {
  }
})

h1, button {
  margin-bottom: 1000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-scrollto@2.7.9/vue-scrollto.js"></script>
<div id="app">
  <button v-scroll-to="'#element'">
    Scroll to #element
  </button>
  
  <h1 id="element">Hi. I'm element</h1>
</div>

点击按钮，然后转到Vue.js中的页面部分

2 个答案: