Javascript 向下滚动到Vuejs组件上具有类名的元素

我有一个无序列表的组件，我想做的是，当加载组件时，我希望该组件向下滚动到

元素，并带有一个类名“actual month”，以便它可见

<b-card no-body header="<i class='fa fa-align-justify'></i> Unorderd List"  style="height: 680px">
          <b-tabs card pills>
              <b-tab v-for="debt in user_debts"  :title="Debts list"  :key="debt.id" class="card-height">             
                 <table class="table table-sm amortization-header header-fixed">
                  <thead>
                      <tr>
                        <th>Month</th>
                        <th>Balance</th>
                        <th>Paid</th>
                        <th>Debt</th>
                        <th>Nominal Interest</th>
                      </tr>
                  </thead>
                  <tbody> 
                    <tr v-for="month in amortization.schedule" :class="{'actual-month' : month.month == amortization.actual_month}">
                      <td>{{month.month}}</td>
                      <td>{{month.balance.toLocaleString()}}<span class="total">€</span></td>
                      <td>{{month.monthly_payment}}<span class="total">€</span></td>
                      <td>{{month.principle}}<span class="total">€</span></td>
                      <td>{{month.interest}}<span class="total">€</span></td>
                    </tr>
                  </tbody>
                </table>
              </b-tab>
          </b-tabs>
        </b-card>

月
平衡
支付
债务
名义利息
{{month.month}
{{月.余额.toLocaleString（）}}€
{{月.月付款}}€
{{月原则}}€
{{月利息}}€

您可以使用scrollIntoView：

mounted: function (){
  var el = this.$el.getElementsByClassName("actual-month")[0];
  el.scrollIntoView();
}

---

可能有几种方法可以做到这一点，但我会将其放在一个容器中，以便可以重用，因此：

const scroller = {
  methods: {
    scrollToClass(className) {
      // Get the first element with the given class name
      let el = this.$el.querySelector(className)
      // Get the bounding rectangle so we can get the element position position
      let rect = el.getBoundingClientRect()
      // Scroll to the element (using x and y axis)
      window.scrollTo(rect.left, rect.top)
    }
  }
}

然后您可以在

挂载的

钩子中使用它（当

this.$el第一次可用时），如下所示：

以下是JSFiddle:
添加到Julien的答案中，对于许多用例，为自动操作（如跳转到页面的一部分）设置动画，平滑滚动改善用户体验：

el.scrollIntoView({ behavior: 'smooth' })

其他答案对我来说不太合适-我遇到了以下错误：
无法访问属性scrollIntoView of undefined
。要解决这个问题，您可以添加一个
setTimeout

假设您希望在提交表单时滚动到包含类
invalid
的第一个元素：

const someComponent {
  ...
  methods: {
    validateForm() {
      if (formValid) {
        // submit form
        ...
      } else {
        // show errors
        ...
        // and scroll to the first one
        this.scrollToInvalidField();
      }
    },
    scrollToInvalidField() {
      // Without this setTimeout, an "undefined" error is thrown.
      setTimeout(() => {
        let el = this.$el.getElementsByClassName('invalid')[0];
        el.scrollIntoView();
      }, 0);
    },
  },
  ...
}

当然，如果您想要平滑滚动，
{behavior:'smooth'}
可以作为参数传递给
scrollIntoView（）
函数，如他在回答中提到的@digout。
您的解决方案创建了一个错误：TypeError:无法读取未定义的属性“getElementsByClassName”“如果需要向下滚动到某个元素，则此选项有效。如果它在页面顶部的某个地方，它只会滚动到最上面的部分；不指向具有该类名的特定选择器
const someComponent {
  ...
  methods: {
    validateForm() {
      if (formValid) {
        // submit form
        ...
      } else {
        // show errors
        ...
        // and scroll to the first one
        this.scrollToInvalidField();
      }
    },
    scrollToInvalidField() {
      // Without this setTimeout, an "undefined" error is thrown.
      setTimeout(() => {
        let el = this.$el.getElementsByClassName('invalid')[0];
        el.scrollIntoView();
      }, 0);
    },
  },
  ...
}