angularjs路由切换  页面不会回到顶部

问题:

在angularjs中  ui-sref或者$state.go(),通过路由切换页面,发现新打开的路由页面仍然停留在上一次的路由页面访问的位置。

解决方式:

  通过网上搜索,发现有通过  autoscroll="true"实现的,确实这项配置可以使得新打开的路由页面回到当前路由块的顶部,而不会满足我回到网页的顶部。如果在开发过程中遇到这种切换路由回到网页顶部或者其他位置的情况该怎么解决呢?

最终通过路由变化监控实现如下:

  artApp.run(['$rootScope', '$state', function ($rootScope, $state){
  $rootScope.$on('$stateChangeSuccess',
function(event, unfoundState, fromState, fromParams){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
  );
  }]);

  

angularjs 路由切换回到顶部的更多相关文章

  1. vue路由切换时内容组件的滚动条回到顶部

    在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...

  2. 关于angular跳转路由之后不能自动回到顶部的解决方法

    Question: angular2 scroll top on router change 当我们在第一个路由滑动到底部当我们点击导航跳转到另一个路由时页面没有回到顶部而是保持上一个路由的滚动位置, ...

  3. angularjs 水平滚动选中按钮高亮显示 swiper和回到顶部指令的实现ionic

    首先安装 swiper npm install --save swiper 或者 bower install --save swiper <link rel="stylesheet&q ...

  4. vue开发 回到顶部操作

    第一种:使用vue-router history 模式下,用scrollBehavior 方法实现. 1 export default new Router({ 2 mode: 'history', ...

  5. Angularjs路由需要了解的那点事

    Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...

  6. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  7. AngularJS 路由 resolve属性

    当路由切换的时候,被路由的页面中的元素(标签)就会立马显示出来,同时,数据会被准备好并呈现出来.但是注意,数据和元素并不是同步的,在没有任何设置的情况下,AngularJS默认先呈现出元素,而后再呈现 ...

  8. [AngularJS] “路由”的定义概念、使用详解——AngularJS学习资料教程

    这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 AngularJS“路由”的定义概念 AngularJS最近真的很火,很多同事啊同学 ...

  9. angularjs -- 路由监听

    前几天,项目在做一个功能时需要在页面切换之前关闭正在执行的函数.尝试了几种方式都不行,最后想到既然angularjs是通过理由切换页面,那就在路由上面做文章吧.AngularJS在路由发生改变时,可以 ...

随机推荐

  1. 「译」JVM是如何使用那些你从未听过的x86魔幻指令实现String.compareTo的

    原文https://jcdav.is/2016/09/01/How-the-JVM-compares-your-strings/ 魔幻的String.compareTo 我们之前可能已经见过Java的 ...

  2. D. Equalize the Remainders set的使用+思维

    D. Equalize the Remainders set的学习::https://blog.csdn.net/byn12345/article/details/79523516 注意set的end ...

  3. QTableWidget自定义委托

    QTableWidget单元格使用自定义的lineEdit控件导致不能选中 使用自定义委托解决 1.自定义委托 class LineEditDelegate : public QItemDelegat ...

  4. PROTEUS串口仿真遇到的BUG(转载)

    转载自:http://blog.csdn.net/viperchaos/article/details/6246419 串口通信设置的顺序非常重要,最好严格按照步骤来,在开启数据接受的使能之前最好一定 ...

  5. SpringDataJpa实现增删改查分页

    一.引入依赖 <properties> <spring.version>4.2.4.RELEASE</spring.version> <hibernate.v ...

  6. Unity接入友盟分享遇到的坑

    最近项目接了一下友盟分享的SDK,中间遇到了几个坑,写下几条注意事项记录一下. 接入之前需要准备友盟开发者账号,相应平台开发者账号(微信.QQ.新浪微博)等... 安卓端: 1.确保 AndroidM ...

  7. dedecms_v5.7的apache文件名解析漏洞的学习

    0x00 Apache文件名解析漏洞 Apache是一个Web服务器,可以提供web服务.配合java中间件.PHP实现动态页面访问. Apache和PHP通过接口接入后,Apache接受用户的请求, ...

  8. Java内存区域与内存溢出异常——深入理解Java虚拟机 笔记一

    Java内存区域 对比与C和C++,Java程序员不需要时时刻刻在意对象的创建和删除过程造成的内存溢出.内存泄露等问题,Java虚拟机很好地帮助我们解决了内存管理的问题,但深入理解Java内存区域,有 ...

  9. 轻松扩展机器学习能力:如何在Rancher上安装Kubeflow

    随着机器学习领域不断发展,对于处理机器学习的团队来说,在1台机器上训练1个模型已经有些难以为继,并且现在业界的共识是机器学习已经不仅仅是简单的模型训练. 在模型训练之前.过程中和之后,需要进行许多活动 ...

  10. c++实现lower_bound和upper_bound

    #include <bits/stdc++.h> using namespace std; int a[] = {0,1,3,3,5,6,7,8,9,20,21,21,21,30,41,4 ...