最近做的新项目中要求让看不见的内容自动往上滑动一定的距离，使之可以看到，下面我来分享一下。
效果图：
我主要是使用 scrollTop 来做的往上滑动的功能，使用 animate 函数使之有一定的动画效果。
下面是我的相关代码，大家可以参考：
1、html代码
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 /div2、js文件
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] },}
