Window scrollTo() 方法
一、介绍
scrollTo() 方法可把内容滚动到指定的坐标。
二、代码
<template>
<div>
<div class="bottom">顶部</div>
<el-button @click="toBottom()">滚动到底部</el-button>
<div>
<img class="realDataImage" src="@/assets/realdata.png" alt />
</div>
<div>
<img class="realDataImage" src="@/assets/realdata.png" alt />
</div>
<div>
<img class="realDataImage" src="@/assets/realdata.png" alt />
</div>
<div class="bottom">到底部了</div>
</div>
</template>
<script>
export default {
data:{
return(){
}
},
methods:{
toBottom(){
// 滚动内容的坐标位置0,50000:
window.scrollTo(0,50000);
}
}
}
</script>
<style lang="scss" scoped>
.realDataImage {
width: 600px;
height: 400px;
margin-top: 20px;
}
.bottom{
padding-bottom: 5px;
font-size: 20px;
background-color: red;
}
</style>
三、页面
点击,“滚动到底部”按钮,页面直接到底部。