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在路由发生改变时,可以 ...
随机推荐
- 大batch任务对structured streaming任务影响
信念,你拿它没办法,但是没有它你什么也做不成.—— 撒姆尔巴特勒 前言 对于spark streaming而言,大的batch任务会导致后续batch任务积压,对于structured streami ...
- 消息队列,RabbitMQ、Kafka、RocketMQ
目录 1.消息列队概述 1.1消息队列MQ 1.2AMQP和JMS 1.2.1AMQP 1.2.2JMS 1.2.3AMOP 与 JMS 区别 1.3消息队列产品 1.3.1 Kafka 1.3.2 ...
- HDU 3038 (向量图解)
题意:\(有n个人坐在zjnu体育馆里面,然后给出m个他们之间的距离, A B X, 代表B的座位比A多X.\) \(然后求出这m个关系之间有多少个错误,所谓错误就是当前这个关系与之前的有冲突\) \ ...
- P2764 最小路径覆盖问题 网络流重温
P2764 最小路径覆盖问题 这个题目之前第一次做的时候感觉很难,现在好多了,主要是二分图定理不太记得了,二分图定理 知道这个之后就很好写了,首先我们对每一个点进行拆点,拆完点之后就是跑最大流,求出最 ...
- zabbix 告警信息与恢复信息
名称: Action-Email 默认接收人: 故障{TRIGGER.STATUS},服务器:{HOSTNAME1}发生: {TRIGGER.NAME}故障! 默认信息: 告警主机:{HOSTNAME ...
- Bootstrap Table 3 官方文档
备查 Bootstrap Table 3 官方文档 示例
- 闲来无事做个C#小项目——1
2020-05-10 12:25:47 项目背景就是最近和一些朋友在玩一个游戏,游戏中有一个囤货的东西,就是买进卖出的,然后为了方便计算,所以就先写一个简单的计算器用来算账, 这是界面图(最初形态,没 ...
- 马上要去bupt参加培训了。。
想想我一直在逃避,失败人生.傻逼废物垃圾废人...我这么弱还活在世界上,真的对不起 Model
- sql:exists 与 not exists
$sql = "select a.Vchcode,a.vdate,a.btypeid,a.vcomment,a.total,a.vnumber,b.bfullname,b.artotal,b ...
- JPA 分页处理
1.要实现jpa分页管理首先得要正确配置jpa环境,在spring环境中的配置如下: 开启注解功能 <bean class="org.springframework.orm.jpa.s ...