vue切换页面(路由)时如何保持滚动条回到顶部

目录
  • vue切换“页面”(路由)时保持滚动条回到顶部
  • vue页面跳转后，滚动条不在顶部的解决
    • 问题描述
    • 解决方法

vue切换“页面”(路由)时保持滚动条回到顶部

vue项目做pc端的时候，发现在两个页面切换时 滚动条没有回到顶部而是保持原先的位置；

这是由于vue是单页面应用，只是更换了路由内容，还在当前页面滚动条是不会回到顶部的。

解决办法是在切换路由的时候，将滚动区域的滚动条复位为0。

  // 使用 watch 监听$router的变化,
  watch: {
    '$route': function(to, from) {
　    document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    }
  }

当然看页面的布局，可能滚动区域并不是document的scrollTop为0 能有效果，和项目里面的布局滚动区域有关，下面是项目里面的滚动区域 app-main ；

<template>
  <div id="app">
    <router-view />
    <!-- 骨架屏，在菜单组件触发隐藏，目前没想到又好的方式处理 -->
    <common-skeleton v-if="showSkeleton" />
  </div>
</template>
<script>
import CommonSkeleton from './components/Skeleton/common'

export default {
  name: 'App',
  components: {
    CommonSkeleton
  },
  computed: {
    showSkeleton() {
      return this.$store.state.settings.showSkeleton
    }
  },
  watch: {
    '$route'(val) {
      if (!document.getElementsByClassName('app-main') || !document.getElementsByClassName('app-main').length) {
        return
      }
      document.getElementsByClassName('app-main')[0].scrollTop = 0
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
#app {
  width: 100%;
  height: 100%;
  @include clearfix;
}
</style>

vue页面跳转后，滚动条不在顶部的解决

问题描述

vue在将页面滚动到页面中部或者底部（反正不在顶部），再进行页面跳转后，新页面的滚动条还处于上一个页面的位置，并没有更新到页面顶部

解决方法

在全局路由钩子里面将页面滚动到页面顶部

router.beforeEach((to, from, next) => {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
 
    // 兼容IE
    window.scrollTo(0, 0);
    next();
})

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法

    这里是本小白使用时遇到的问题及个人使用的方法可能并不完美. 1.监测浏览器滚动条滚动事件及滚动距离 dmounted() { window.addEventListener("scroll", this.gundong); }, destroyed() { window.removeEventListener("scroll", this.gundong); }, methods: { gundong() { var dis = document.documentE

  • vue实现滚动条到顶部或者到指定位置

    vue实现滚动条到顶部或者到指定位置

    目录 vue滚动条到顶部或到指定位置 vue设置滚动条 vue如何在div中设置滚动条呢? vue滚动条到顶部或到指定位置 首先在 html 里面给你要滚动的元素设置属性 ref='box' 这就相当于是DOM操作了 , 然后 根据 属性名找到则个元素就可以操作啦 vue设置滚动条 vue如何在div中设置滚动条呢? 首先需要写一下css样式 <div     :style="{'max-height': this.timeLineHeight + 'px' }"     sty

  • vue2.0路由切换后页面滚动位置不变BUG的解决方法

    最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变. <a href="javascript:;" rel="external nofollow" class="btn btn01" @click="useRightNow">立即试用</a> <router-link class="db" to="/user">个人中心<

  • vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

    有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 x 坐标. ypos:必需.要在窗口文档显示区左上角显示的文档的 y 坐标. 例如滚动内容的坐标位置100,500: window.scrollTo(100,500); 好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为. 使用前端路由,当切换到新路由

  • vue切换页面(路由)时如何保持滚动条回到顶部

    目录 vue切换“页面”(路由)时保持滚动条回到顶部 vue页面跳转后,滚动条不在顶部的解决 问题描述 解决方法 vue切换“页面”(路由)时保持滚动条回到顶部 vue项目做pc端的时候,发现在两个页面切换时 滚动条没有回到顶部而是保持原先的位置: 这是由于vue是单页面应用,只是更换了路由内容,还在当前页面滚动条是不会回到顶部的. 解决办法是在切换路由的时候,将滚动区域的滚动条复位为0.   // 使用 watch 监听$router的变化,   watch: {     '$route':

  • js滚动条回到顶部的代码

    虽然平滑性处理的不好,但非常适合学习 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="tex

  • Vue路由切换页面不更新问题解决方案

    前言:vue-router的切换不同于传统的页面的切换.路由之间的切换,其实就是组件之间的切换,不是真正的页面切换.这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页面无法更新的问题了. 一.问题呈现 在路由中进行切换结果 这时候会发现input标签的value值并没有随着路由的改变而改变.并没有更新 二.解决方案① 给<router-view :key="key"></router-view>增加一个不同:key值,这样vue

  • vue进入页面时滚动条始终在底部代码实例

    本文实例为大家分享了vue进入页面时滚动条始终在底部的具体代码,供大家参考,具体内容如下 mounted () { this.scrollToBottom(); }, //每次页面渲染完之后滚动条在最底部 updated:function(){ this.scrollToBottom(); }, methods:{ scrollToBottom: function () { this.$nextTick(() => { var container = this.$el.querySelector

  • vue 动态添加的路由页面刷新时失效的原因及解决方案

    vue 动态添加的路由页面刷新时失效的原因及解决方案

    目录 问题描述 场景 接口返回 前端菜单定义 vuex中的方法 出现的问题 原因分析 解决方案 实现代码 route/index.js的导航守卫中添加逻辑判断 总结 问题描述 昨天在做vue后台管理系统有关权限页面动态添加到路由的功能时,遇到一个问题:动态添加的路由页面,在页面刷新时出现了404的情况. 场景 后台管理系统的权限控制是通过在前端页面定义权限code, 把code给后台同学保存配置到表中,之后根据后台返回的权限code列表与前端页面配置的code菜单列表做筛选匹配,code相等的页

  • vue使用elementUI分页如何实现切换页面时返回页面顶部

    目录 使用elementUI分页实现切换页面时返回页面顶部 原理 实现 element-ui分页el-pagination的坑 1.所有的信息都必须的动态的 2.数据在data里面 3.这是重中之重,认真我的认证 使用elementUI分页实现切换页面时返回页面顶部 原理 给elementUI分页组件的切换页面时触发事件(在这里就是handleCurrentChange函数)添加一个跳转到页顶的方法即可. 实现 <!-- 分页组件 --> <el-pagination  @current

  • Vue Spa切换页面时更改标题的实例代码

    在Vue组件化开发过程中,因为是单页面开发,但是有时候需要页面的title根据情况改变,于是上网查了一下,各种说法花(wo)里(kan)胡(bu)哨(dong), 于是想到一个黑科技 documet.title="xxx"; 随便创建一个项目,在独立的模块中,created在钩子函数启动之后document.title='标题'; 但是据说在IOS的微信下是无效的,虽然用苹果机测试过有用,但是想到这样会影响我的代码洁癖. <script> export default {

  • Vue项目页面跳转时浏览器窗口上方显示进度条功能

    在vue项目中,为了减少首屏加载的时间,通常会开启路由的懒加载.路由懒加载配合gizp确实能帮助我们大大的加快首屏的加载时间. 然而,路由懒加载会使得我们在第一次打开一个新页面的时候,会有一个加载时间.如果在这个时候我们没有一个提示的话,给人的感觉会是好像我点了页面跳转但是没反应.所以,这个时候我们可以加一个进度条来告知用户. 具体实现,我们使用NProgress这个滚动条效果插件. 1.安装: cnpm install --save nprogress 2.在main.js中引入: impor

  • vue移动端路由切换实例分析

    vue移动端路由切换实例分析

    在写移动端时,因为需要给页面做转场动画,便有了这次的研究 其中最主要的时以下两个问题: 浏览器导航栏的切换 IOS 上滑动切换时,会有两次页面的转场动画,一次自身滑动时进行的切换,随后触发我们设置的转场动画. 除了上面两个问题,其余的操作都是可以在页面内进行设置,基本都是可控的.主要就是解决上面两个问题. 可以看下实际写出来的效果:在线DEMO 1. 浏览器导航栏的切换 通过记录 历史记录 来比较判断前进还是后退 如下例子 A页面 -> B页面 -> C页面 假如我从 A页面到 B页面 再到C

随机推荐