Javascript Vue-滚动到Div

我想创建一个按钮，一旦点击，它应该滚动到特定的div

这是我的密码：

  <form @submit.prevent="onSubmit">
  <div class="form-group">
    <div class="col-md-6 employee_name">
      <label for="name">Name</label>
      <input
        type="text"
        name="name"
        class="name_input"
        placeholder="Enter your name"
        v-model="name"
        required
      />
    </div>
  </div>
  <div class="form-group">
    <div class="col-md-6 employee_email">
      <label for="email">Email</label>
      <input
        type="email"
        name="email"
        class="email_input"
        placeholder="Enter your email"
        required
      />
    </div>
  </div>
  <div class="form-group">
    <div class="col-md-6 employee_title">
      <label for="title">Title</label>
      <input
        type="text"
        name="title"
        class="title_input"
        placeholder="Enter your title"
        v-model="title"
        required
      />
    </div>
  </div>
  <div class="form-group">
    <button class="btn btn-light submit" type="submit" @submit="onSubmit>Submit</button>
  </div>
</form>

   <div id="main" class="container" v-if="infoComplete">
  <div class="col-md-12 primary_option">
    <h4 class="primary_lead">Please copy & paste signature inside the box below</h4>
    <div class="container desktop_container">
      <h5 class="email_style">Desktop</h5>
      <div class="col-md-7 desktop">
        <EmailSignature :name="name" :title="title" />
      </div>
    </div>
    <div class="container mobile_container">
      <h5 class="email_style">Mobile</h5>
      <div class="col-md-4 mobile">
        <MobileEmailSignature :name="name" :title="title" />
      </div>
    </div>
    <div class="col-md-6 secondary_option">
      <h2 class="secondary_lead">OR...</h2>
      <button class="btn btn-outline-light download_button" @click="onDownload">Download</button>
    </div>
  </div>
</div>

以及我的onSubmit函数：

 onSubmit() {
  console.log("Submitted");
  this.infoComplete = true;
},

---

虽然它可以工作，但它没有按照正确的顺序执行。因此，提交后，div将显示。但是，如果我再次单击submit按钮，它将滚动到该div。我需要它，所以一旦该div显示在屏幕上，就立即滚动。有更好的方法吗？我不能确定我做错了什么

我过去做过一些事情，可以通过创建一个指令来完成

const scroll = {
    bind(el, binding) {
        const handler = () => {
            setTimeout(function () {
                let element = el;

                if (typeof binding.value.el !== 'undefined') {
                    element = document.getElementById(binding.value.el)
                }

                let bodyRect = document.body.getBoundingClientRect(),
                    elementRect = element.getBoundingClientRect(),
                    offset = (elementRect.top - bodyRect.top) + (binding.value.offset || 0),
                    startingY = window.pageYOffset,
                    elementY = offset,
                    targetY,
                    diff,
                    easeInOutCubic,
                    start,
                    duration = (binding.value.speed || 500);

                // if element is close to page's bottom then window will scroll only to some position above the element...
                targetY = document.body.scrollHeight - elementY < window.innerHeight ? document.body.scrollHeight - window.innerHeight : elementY;
                diff = targetY - startingY;

                easeInOutCubic = function (t) {
                    return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
                };

                if (!diff) return;

                // bootstrap our animation,
                //  it will get called right before next frame shall be rendered...
                window.requestAnimationFrame(function step(timestamp) {
                    if (!start) start = timestamp;

                    let time = timestamp - start, // elapsed milliseconds since start of scrolling...
                        percent = Math.min(time / duration, 1); // get percent of completion in range [0, 1]

                    // apply the easing, it can cause bad-looking
                    //  slow frames in browser performance tool, so be careful...
                    percent = easeInOutCubic(percent);

                    window.scrollTo(0, startingY + diff * percent);

                    // proceed with animation as long as we wanted it to.
                    if (time < duration) {
                        window.requestAnimationFrame(step)
                    }
                });
            }, 400);
        };

        let scrollOn = binding.value.scrollOn || null;

        if (scrollOn && scrollOn === 'init') {
            handler();
        } else {
            el.addEventListener('click', handler);
            el.$destroy = () => el.removeEventListener('click', handler);
        }
    },
    unbind: function (el) {
        if (typeof el.$destroy !== 'function') return;

        el.$destroy()
    }
};


new Vue({
  el: "#app",
  directives: {scroll: scroll}
})

const scroll={
绑定（el，绑定）{
常量处理程序=（）=>{
setTimeout（函数（）{
设元素=el；
if（typeof binding.value.el！=“未定义”）{
element=document.getElementById（binding.value.el）
}
让bodyRect=document.body.getBoundingClientRect（），
elementRect=element.getBoundingClientRect（），
偏移量=（elementRect.top-bodyRect.top）+（binding.value.offset | | 0），
startingY=window.pageYOffset，
元素Y=偏移量，
目标，
差异，
easeInOutCubic，
开始
持续时间=（binding.value.speed | | 500）；
//若元素靠近页面底部，那个么窗口将只滚动到元素上方的某个位置。。。
targetY=document.body.scrollHeight-elementYel.removeEventListener（'click'，handler）；
}
},
解除绑定：函数（el）{
如果（类型el.$destroy！=“函数”）返回；
el.$destroy（）
}
};
新Vue({
el:“应用程序”，
指令：{scroll:scroll}
})

---

请参见此图。您只需将滚动代码放入

onSubmit

函数，添加一个setTimeout，等待页面呈现

id=“main”

块，即可完成此操作

onSubmit() {
        console.log("Submitted");
        this.infoComplete = true;
        setTimeout(()=>{
          let elmnt = document.getElementById("main");
          elmnt.scrollIntoView({behavior: "smooth"});
        }, 100)
      },

---

您的

onSubmit

在模板代码中的什么位置？@HankX刚刚添加了它。

onSubmit() {
        console.log("Submitted");
        this.infoComplete = true;
        setTimeout(()=>{
          let elmnt = document.getElementById("main");
          elmnt.scrollIntoView({behavior: "smooth"});
        }, 100)
      },