1.鼠标点击事件:
点击按钮滚动到对应位置
<div class="announce_left" >
<el-button v-for="(item,index) in news" style="width: 200px;margin-left: 0px;" @click="goToAnnounce(index)">{{item.title}}</el-button>
</div>
2.鼠标移入事件:
鼠标移入按钮滚动到对应位置:
<div class="announce_left" >
<el-button v-for="(item,index) in news" style="width: 200px;margin-left: 0px;" v-on:mouseover="goToAnnounce(index)" v-show="show">{{item.title}}</el-button>
</div>
滚动到对应位置方法:
goToAnnounce(index){
document.getElementById(index).scrollIntoView({ behavior: 'smooth' })
},
效果图:
![](https://img-blog.csdnimg.cn/img_convert/34cea3c159234a4ff3b63f7cd06d21a1.png)