Vue项目中实现页面滚动到顶部功能

本文基于Vue2+element-ui技术栈，通过scrollTo方法实现页面滚动到顶部功能

polaris_wrp

3874人浏览 · 2023-09-28 10:46:09

polaris_wrp · 2023-09-28 10:46:09 发布

写在前面

本文技术栈基于 Vue2+Element-ui，通过点击按钮来实现页面回滚到顶部的功能，适用场景主要是管理后台的一些表格数据页面

简单案例

这次使用的是scrollTo方法，可以使界面滚动到给定元素的指定坐标位置；

element.scrollTo({
  top: 100,
  left: 100,
  behavior: "smooth",//平滑滚动
});

根据element-ui我在本地项目写了个demo页面，布局样式啥的我就直接放代码了；
整体页面主要包括顶部搜索栏目和内容区域以及置顶按钮，顶部栏目和置顶按钮都用上了sticky粘性定位，确保位置固定，在滚动时内容不会被覆盖；

1.页面代码

<template>
  <div>
    <el-card class="top-card">
      <div class="search-wrap">
        <div class="btns">
          <el-button type="primary" size="small">新增</el-button>
        </div>
        <div class="search-item">
          <span>北极星：</span>
          <el-input v-model="value" placeholder="请输入" style="width: 180px"></el-input>
        </div>
        <div class="search-item">
          组织：
          <el-select v-model="modelVal" placeholder="请选择" style="width: 200px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="end">
        <el-button type="primary" size="small">搜索</el-button>
        <el-button type="plain" size="small">重置</el-button>
      </div>
    </el-card>
    <el-card class="center-card" ref="centerCardRef">
      <div>
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" stripe>
          <el-table-column prop="date" label="日期" width="180"> </el-table-column>
          <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
      </div>
      <div class="pagination-wrap">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </el-card>
    <span class="to-top" @click="handleToTop">
      <i class="el-icon-download"></i>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage4: 4,
      value: '',
      modelVal: '',
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      tableData: [
        {
          date: '2016-05-02',
          name: 'beiid',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '北京举行虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-03',
          name: '大师课烂大街',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    };
  },
  created() {
    let i = 3;
    while (i > 0) {
      this.tableData = this.tableData.concat([...this.tableData]);
      i--;
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  }
};
</script>
<style lang="less" scoped>
.top-card {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: 15px;
  .end {
    display: flex;
    justify-content: flex-end;
  }
  .search-wrap {
    display: flex;
    padding: 10px 0 10px 10px;
    .btns {
      margin-right: 20px;
    }
    .search-item {
      margin-right: 20px;
    }
  }
}
.center-card {
  .pagination-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
    padding-bottom: 10px;
  }
}
.to-top {
  position: sticky;
  bottom: 15%;
  left: 90%;
  z-index: 20;
  font-size: 30px;
  color: #74b9ff;
  cursor: pointer;
  i {
    transform: rotate(180deg);
  }
}
</style>

2.页面效果

初始页面效果如图
页面滚动之后，可以看到搜索栏目以及按钮位置固定切不会被覆盖

3.滚动函数

主要就是scrollTo方法;
加上下面方法之后也是轻松的实现了功能，于是考虑将此页面接入实际项目中；

handleToTop() {
  window.scrollTo({
     top: 0,
     behavior: 'smooth'
   });
 },

在实际项目中使用

1.遇到的问题

当我把这个页面放入实际项目中时，却发现window.scrollTo 方法不再生效；
在翻阅了一些文章以及官方api之后，了解到核心点还是调用scrollTo方法需要作用到滚动容器上，因为上面的demo案例是单纯的一个页面，并没有像实际项目中那样中页面层层嵌套；
所以解决方式就是在项目中找到滚动的容器，获取元素并调用此方法；

2.解决方式

根据上面的思路打开浏览器找出滚动容器
如下图：
找到之后，我们修改滚动方法；通过querySelector方法拿到Element对象,调用scrollTo方法实现滚动到顶部的功能

handleToTop() {
  const scrollEle = document.querySelector('.contentContrnier')
  console.log(scrollEle.scrollTop);
  scrollEle.scrollTo({
     top: 0,
     behavior: 'smooth'
   });
 },