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. ubuntu16.04安装FastDFS-5.08

    fastdfs github地址: https://github.com/happyfish100/ 1.FastDFS上传原理 - storage定时向tracker上传状态信息 - client上 ...

  2. Android P HIDL demo代码编写 (原创)

    之前的文章已经分析了HIDL服务的注册和调用,这篇文章来总结下一个HIDL的服务如何编写. 缩写HAL文件 首先要确认放置文件夹和接口的包名,因为这跟后面使用脚本生成一部分代码有关,一般默认的放在ha ...

  3. SpringBoot:整合Shiro

    目录 1.Shiro简介 1.1.什么是Shiro? 1.2.有哪些功能 1.3.Shiro架构(外部) 1.4.Shiro架构(内部) 2.HelloWorld 3.Shiro整合Spring Bo ...

  4. linux下在用python向文件写入数据时'\n'不起作用

    网上翻看一圈,大家都说利用write写数据换行,在linux下用'\n',windows下利用'\r\n',可是尝试了一下,'\n'在windows底下可换行,在linux底下居然不起作用,最后利用' ...

  5. redis 集群安装

    redis集群安装 1.下载redis源码 2.解压并进入解压后的文件夹redis内 3.make,生成一系列的文件(mkreleasehdr.sh, redis-benchmark, redis-c ...

  6. LeetCode链表专题

    链表 套路总结 1.多个指针 移动 2.虚假链表头:凡是有可能删除头节点的都创建一个虚拟头节点,代码可以少一些判断(需要用到首部前一个元素的时候就加虚拟头指针) 3.快慢指针 如leetcode160 ...

  7. Cannot parse "1986-05-04": Illegal instant due to time zone offset transition (Asia/Shanghai)

    调查系统错误时,发现了一个很奇怪的现象,出生日期1986-05-04号的用户始终无法注册.发现后台使用使用jodatime的代码demo如下: public static DateTime parse ...

  8. python 利用 for ... else 跳出双层嵌套循环

    背景 周末在写一个爬虫时,遇到这样一种场景:从搜索结果中下载指定数量的文件 例如:搜索结果中共分为10页展示,加起来一共50条数据,现在要做的是从50条数据中下载指定数量的数据 为了实现这个功能,开始 ...

  9. 浅析Block闭包

    浅析Block闭包 简单来说,block就是将函数及其上下文封装起来的对象,从功能上可以把它看作是C++中的匿名函数,也可称之为块. Block类型写法: 返回值+(^块名)+(参数)= ^(参数){ ...

  10. 读懂这几个关键词,你就能了解 Docker 啦

    基于高度虚拟化所诞生的容器技术,如今已经走向大规模应用.那么容器.虚拟机.Docker.Openstack.Kubernetes 之间又有什么关系,对现在的选择有什么影响呢? 上世纪 60 年代,计算 ...