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. 题目分享N

    题意:有辆车,有r行,s*2列,在第s列和第s+1列之间有个过道,出口在第r+1行的过道处,现在给出每个人的位置(行号和列号),每人每次只能动一格,问最少耗费多长时间全员才能逃出去 分析:假如车上只有 ...

  2. [转载] IE8+兼容小结

    本文分享下我在项目中积累的IE8+兼容性问题的解决方法.根据我的实践经验,如果你在写HTML/CSS时候是按照W3C推荐的方式写的,然后下面的几点都关注过,那么基本上很大一部分IE8+兼容性问题都OK ...

  3. Python+Typora博客图片上传

    简介 用Typora 写Markdown 1年多了,这个编辑器的确很好用,但就是写完博客复制到博客园时要一个个手动插替换图片非常麻烦.后来发现最新版的Typora 已经支持图片上传功能,在 设置-图像 ...

  4. QtCreator MSVC 搭建 Debugger

    QtCreatorForWindows搭建Debugger QtCreator for windows选择mingw或者msvc: qt-opensource-windows-x86-msvc2015 ...

  5. C#操作时区转换时遇到的一些问题和解决方法分享

    先上一下自己弄出来的库,.NETCore 2.2环境,以前的老库不在适用了TimeZoneInfo对象要熟悉 /// <summary> /// 获取当前时间戳 /// </summ ...

  6. PMS学习

    一,PMS的adb相关重要指令 1,adb shell dumpsys package(dump所有的系统内apk信息) 2,adb shell dumpsys package “com.androi ...

  7. 使用ultraISO制作U盘制作系统盘提醒:设备忙,请退出所有在运行的应用。

    U盘很久没用,今天重装系统用ultraISO做系统盘提示如下: 本人解决方法如下:打开设备管理器,磁盘.看看磁盘是不是有200M的EFI没有格掉 因为磁盘管理没有权限格U盘,网上找个工具,我随手找个d ...

  8. js 实时获取屏幕高度并赋值

    var that = this; var h = 1344,w=750; var orderHight1 = document.body.clientHeight; var orderWidth1 = ...

  9. Interactive and non-interactive shell环境变量的差异

    背景 在mac上安装mosh server后,用mosh client去连接,一直报command not found的错 zsh: command not found: mosh-server 但是 ...

  10. 【雕爷学编程】Arduino动手做(52)---MicroSD卡读写模块

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种 的.鉴于本人手头积累了一些传感器和模块,依照实践(动手试试)出真知的理念,以学习和交流为目的,这里准 ...