vue/js實現頁面自動往上滑動效果

<div class="bodyblockcons" :style="'padding-top:'+heightHeader+'px'">
      <div class="content">
        <div class="title" id="titles">
          <span class="name">名稱</span>
          <span class="num">數量</span>
          <span class="price plt">價格</span>
        </div>
        <div class="item-content">
          <div class="ct-content" id="scrollbody" :style="ShowKey?'height:'+boHeights+'px;':''" @click="enterNull">
            <div
              class="item"
              v-for="(item,index) in newList"
              :key="index+item"
              @click.stop="enterNull"
              :id="'itemID'+index"
            >
              <div class="name">{{item.Product}}</div>
              <!--紅色字型樣式 colorRed -->
              <div class="num">
                <div class="nums">
                  {{item.numAccount}}
                  <span
                    :class="(item.ProductUnit==item.StockProductUnit)?'':'colorRed'"
                  >{{item.ProductUnit}}</span>
                </div>
                <div class="row">({{item.barAccount}}條)</div>
              </div>
              <!-- colorFD 藍色邊框 -->
              <div
                :class="(indid==item.id)?'price colorFD':'price'"
                @click.stop="enterItem(item,index,$event)"
              >
                <!-- pribgc 背景色（全選） -->
                <span
                  :class="!isTab&&(indid==item.id)&&!item.state&&isClear?'pri pribgc':'pri'"
                >{{item.UnitPrice}}</span>
                <span class="icon" v-if="!isTab&&(indid==item.id)&&!item.state&&!isClear"></span>
              </div>
            </div>
          </div>
        </div>
    </div>
</div>

import $ from '../../../../static/js/jquery-3.3.1.min.js';
import {
  mapState
} from "vuex";
let timer;
export default {
  data() {
    return {
      name: '填價格',
      newList: [], // 合併填單價
      keyHeight: 0,
      boHeights: 0,
    }
  },
  computed: {
    marginTop() {
      let height = 0;
      let result = (1.877 + 1.621 + 0.426 * 2 - 2.5);

      let restheight = hotcss.rem2px(result, window.innerWidth);
      console.log('marginTop---------------->', restheight);
      return restheight;
    },
    ...mapState({
      detailsInfo: state => state.detailsInfo.all,
    }),
  },
  methods: {
    // 確定按鈕，只是用於定位到下一行
    makesure() {
      console.log('makesure-->val', this.isNull);
      console.log('儲存。。。。');
      let _this = this;
      _this.inputVal = '';
      _this.inds = _this.inds + 1;
      _this.indid = _this.indid + 1;
      if (_this.inds < _this.newList.length - 1 || _this.inds == _this.newList.length - 1) {
        _this.getTop(); // 在這裡呼叫滑動的方法
    },
    getTop() {
      $('#scrollbody').animate = "";
      let tops = $('#itemID' + this.inds).offset();
      let tps = tops['top'];  // 獲取當前框距離頂部的距離
      let height = $('#itemID' + this.inds).outerHeight();  // 獲取當前框的高度
      
      console.log('滑動的高度--->', height * (this.inds - (indss - 1)))
      if (tps > this.boHeights) {  // 如何當前框的距離頂部的距離大於某個值（該值可以自動動態設定），那麼就讓它往上滑動
        console.log('-------------->', tps);
        $('#scrollbody').animate({
          scrollTop: height * (this.inds*2)  // 注意：這裡的數值一定要動態變化，不然只會滑動一次而已
        }, 300 /*scroll實現定位捲動*/ ); /*讓整個頁面可以捲動*/
      }
    },
  },
  mounted() {
    console.log('proList------->111', this.proList);
   this.newList  = [...this.detailsInfo.settlmentList]
  },
}