vue开发 回到顶部操作

第一种：使用vue-router

　　history 模式下，用scrollBehavior 方法实现。

1 export default new Router({
2   mode: 'history',
3   routes: routeArray,
4   scrollBehavior (to, from, savedPosition) {
5     return { x: 0, y: 0 }
6   }
7 });

第二种：滚动条在非body上

　　示例：

 1 <template>
 2     <!--.wrap-box元素固定高度，内容溢出时，该元素纵向滚动-->
 3     <div class="wrap-box" ref="scollElement">
 4         <!--.box元素超出父元素.wrap-box高度时，页面会出现滚动条（滚动元素为.wrap-box）-->
 5         <div class="box">
 6             <!--内容区(切换不同模块)-->
 7             <router-view></router-view>
 8         </div>
 9     </div>
10 </template>
11
12 <script>
13     export default{
14         name:'warp-box',
15         updated () {    // 切换不同模块时触发
16           this.$nextTick(()=>{
17               if(this.$refs.scollElement){    // 滚动元素跳转到顶部
18                   this.$refs.scollElement.scrollTop = 0;
19               }
20           })
21           }
22     }
23 </script>
24
25 <style>
26     .wrap-box{
27         height: 200px;
28         overflow-y: scroll;
29     }
30 </style>

第三种：基于第二种

　　在模块化开发中，子模块存在翻页按钮，当页码切换时回到顶部。（此时的滚动元素在祖先模块中）

 1 <template>
 2     <div class="item-one" ref="itemOne">
 3         <div class="list-box">
 4
 5         </div>
 6         <div class="page-box">
 7             <el-pagination
 8                 @current-change="handleCurrentChange"
 9                 :current-page="currentPage"
10                 :page-size="pageSize"
11                 layout="total, sizes, prev, pager, next, jumper"
12                 :total="total">
13           </el-pagination>
14         </div>
15     </div>
16 </template>
17
18 <script>
19     export default {
20         name:'item-one',
21         data(){
22             return{
23                 total:0,
24                 tableData:[],
25                 pageSize:20,
26                 currentPage:1,
27             }
28         },
29         methods:{
30             initData(){//初始化数据
31                 // 初始化数据 total、tableData、pageSize、currentPage等
32             },
33             handleCurrentChange(currentPage){  //  currentPage 改变时会触发
34                 this.currentPage = currentPage;
35                 this.initData();
36                 /*
37                      1、当前模块为子模块，当前模块中内容溢出时存在滚动条，滚动条在祖先模块中。
38                      2、当进行翻页时，路由没有变化，无法使用路由跳转滚动条回到顶部的设置，
39                      并且滚动条并不在body上。
40                      3、解决方法：在子模块中找到祖先模块中的滚动元素。（使用$refs的属性offsetParent寻找滚动元素）
41                      4、this.$el为当前组件的挂载元素(这里可以等同于this.$refs.itemOne)
42                  */
43                 // console.log(this.$el.offsetParent.offsetParent,'滚动元素');
44                 this.$nextTick(()=>{
45                     this.$el.offsetParent.scrollTop = 0;
46                     //this.$el.offsetParent 仅限于当前示例模块的祖先模块基于方法二（一层模块嵌套）
47                     //祖先模块的层次将决定offsetParent的获取，使用时应在控制台打印出，确认后使用
48                 });
49             },
50         }
51     }
52 </script>
53
54 <style>
55 </style>