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. js和jq的获取焦点失去焦点写法

  2. 王颖奇 201771010129《面向对象程序设计(java)》第六周学习总结

    实验六 继承定义与使用 实验时间 2018-9-28 1.目的与要求 理论部分: 继承(inheritance): 继承的特点:具有结构层次:子类继承了父类的域和方法. 主要内容: (1)类.子类.超 ...

  3. Coursera课程笔记----P4E.Capstone----Week 4&5

    Spidering and Modeling Email Data(week4&5) Mailing List - Gmane Crawl the archive of a mailing l ...

  4. Quartus II 与modelsim连接不上的问题

    在Quartus II 中tools>options>General>EDA Tool Options 设置modelsim 路径 说明:不管是Quartus II 与modelsi ...

  5. Python--oop面向对象的学习1

    类和对象的成员分析 ·类和对象都可以存储成员,成员可以归类为所有,也可以归对象所有 ·类存储成员时使用的是与类关联的一个对象 ·独享存储成员时存储在当前对象中 ·对象访问一个成员,如果对象中没有该成员 ...

  6. flex和flex:1的含义

    一.flex详解 flex可以参考阮一峰老师的flex布局教程,很详细看完啥都懂了 链接:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htm ...

  7. 说一说JS的IIFE

    1. 定义IIFE: Immediately Invoked Function Expression,意为立即调用的函数表达式,也就是说,声明函数的同时立即调用这个函数.对比一下,这是不采用IIFE时 ...

  8. tcmalloc安装

    环境是centos 6 (64位) yum list libunwind-devel  (epel 源) wget https://gperftools.googlecode.com/files/gp ...

  9. Redux:Reducers

    action只是描述了“发生了什么事情(导致state需要更新)”,但并不直接参与更新state的操作.state的更新由reducer函数执行. 其基本模式是:(state,action)=> ...

  10. Hbase javaAPI报错:Callexception,tries=10,retries=35,started=38465msago

    [client.RpcRetryingCaller(142)]Callexception,tries=10,retries=35,started=38465msago,cancelled=false, ...