Vue项目中实现页面滚动到顶部功能_vue动态组件component 滚动顶部

写在前面

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

简单案例

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

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

• 根据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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183

2.页面效果

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

3.滚动函数

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

handleToTop() {
  window.scrollTo({
     top: 0,
     behavior: 'smooth'
   });
 },
1
2
3
4
5
6

在实际项目中使用

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'
   });
 },
1
2
3
4
5
6
7
8

3.关于置顶按钮的小优化

• 对于滚动距离太小以及初始化时不展示此按钮，达到一定距离时再展示
• 主要是通过onscroll方法监听滚动事件，从而获取滚动距离，并且通过计算属性返回值控制按钮的显隐效果

写在最后

• 除了上面的方法，还有scrollIntoView() ,scroll()等方法，可以根据实际情况来进行选择；
• 另外，考虑到大多数报表页面较为统一，可以把置顶功能以及整体布局逻辑抽离出来，结合实际情况把它作为一个layout组件去使用；
• 最后，如果本文能够给到你启发或是帮助的话，麻烦点个赞哈，谢谢~~