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>

三、页面
点击,“滚动到底部”按钮,页面直接到底部。
在这里插入图片描述在这里插入图片描述

Logo

前往低代码交流专区

更多推荐