首先通过数组的遍历,给标签设置name的值,通过此name获取此标签的offsetTop //点击此将a标签置于盒子顶部 <div @click="selectType('a')">按钮</div> //我是a标签 <div name='a'>a</div>
methods:{ selectType(val){ let zhi=document.getElementByName(val); //注意如果位置滚动没有到指定位置,请检查2级大盒子是否设置了margin-top,减去这个top即可 let top=zhi[0].offsetTop; let offsetTops=0; //通过定时器的方式实现滚动效果 let timer=setInterval(()=>{ //使用除法的方式更加快速的到达指定位置 let speed=top/5; if(offsetTops>=zhi[0].offsetTop-70){ clearInterval(timer); }else{ offsetTops+=speed; //控制window的滚动条的x,y轴距离 window.scrollTo(0,offsetTops); } },50) } }
点击按钮将指定盒子至于顶部(实现滚动效果)
最新推荐文章于 2023-11-09 17:23:12 发布