angularjs 路由切换回到顶部
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 路由切换回到顶部的更多相关文章
- vue路由切换时内容组件的滚动条回到顶部
在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...
- 关于angular跳转路由之后不能自动回到顶部的解决方法
Question: angular2 scroll top on router change 当我们在第一个路由滑动到底部当我们点击导航跳转到另一个路由时页面没有回到顶部而是保持上一个路由的滚动位置, ...
- angularjs 水平滚动选中按钮高亮显示 swiper和回到顶部指令的实现ionic
首先安装 swiper npm install --save swiper 或者 bower install --save swiper <link rel="stylesheet&q ...
- vue开发 回到顶部操作
第一种:使用vue-router history 模式下,用scrollBehavior 方法实现. 1 export default new Router({ 2 mode: 'history', ...
- Angularjs路由需要了解的那点事
Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...
- vue 2.0 路由切换以及组件缓存源代码重点难点分析
摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...
- AngularJS 路由 resolve属性
当路由切换的时候,被路由的页面中的元素(标签)就会立马显示出来,同时,数据会被准备好并呈现出来.但是注意,数据和元素并不是同步的,在没有任何设置的情况下,AngularJS默认先呈现出元素,而后再呈现 ...
- [AngularJS] “路由”的定义概念、使用详解——AngularJS学习资料教程
这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 AngularJS“路由”的定义概念 AngularJS最近真的很火,很多同事啊同学 ...
- angularjs -- 路由监听
前几天,项目在做一个功能时需要在页面切换之前关闭正在执行的函数.尝试了几种方式都不行,最后想到既然angularjs是通过理由切换页面,那就在路由上面做文章吧.AngularJS在路由发生改变时,可以 ...
随机推荐
- 数位dp H - F(x) HDU - 4734
http://acm.hdu.edu.cn/showproblem.php?pid=4734 一般数位dp表示的是数的性质,这个题目也是一样,但是我们求出来的是一个函数的值,怎么把这个值转化成一类数, ...
- Azkaban无法连接网页
出的问题如下图 首先我查看日志看到有一个 [ERROR] 2020/03/13 11:12:34.417 +0800 ERROR [PluginCheckerAndActionsLoader] [Az ...
- SAP HTTP调用其他系统接口
1业务说明 ABAP系统通过HTTP方式调用其他系统发布的接口 2代码实现 2.1认证接口 根据访问的URL创建HTTP客户端 设置访问方式,并调用SEND和接收函数 有时需要专门验证用户名密码 获取 ...
- uCOS2014.1.10
uC/OS-Ⅱ任务的结构有两种:一种是无限循环结构:另一种是只执行一次的程序结构.若采用只执行一次的程序结构,就要用任务删除函数来实现. uC/OS-Ⅱ进行任务的管理是从调用启动函数OSStart() ...
- DP动态规划之01背包问题
目录 问题描述 问题分析 问题求解 Java代码实现 优化方向一:时间方面:因为是j是整数是跳跃式的,可以选择性的填表. 思考二:处理j(背包容量),w(重量)不为整数的时候,因为j不为整数了,它就没 ...
- [hihoCoder1236 Scores 2015BeijingOnline]简单粗暴的分块+简单粗暴的bitset
题意:50000个5维向量,50000次询问每一维都不大于某一向量的向量个数,强制在线. 思路:做完这题才知道bitset效率这么高,自己本地测试了下1s可以操作1010个bit,orz简单粗暴 令S ...
- Python哈希表和解析式
目录 1. 封装和解构 1.1 封装 1.2 解构 2. 集合Set 2.1 初始化 2.2 增加 2.3 删除 2.4 遍历 2.5 并集&交集&差集&对称差集 3.字典 3 ...
- 数据库当中删除数据后主键id不连续的问题
新建查询: ALTER TABLE `表名` DROP `主键名`;ALTER TABLE `表名` ADD `主键名` int NOT NULL FIRST;ALTER TABLE `表名` MOD ...
- java学习笔记之原型模式及深浅拷贝
一.原型模式的基本介绍 在聊原型模式之前,我们来思考一个小问题,传统的方式我们是如何克隆对象呢? 那我们以多利羊(Sheep)为例,来说明上述这个问题,具体代码见下面: 多利羊(Sheep) publ ...
- Win32 Sdk 连接Access数据库
/************************************************************* *** MyWinClass.cpp 创建窗口模板 *** vs2017+ ...