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在路由发生改变时,可以 ...
随机推荐
- kafka-eagle监控kafka
最近想做一个kafka监控,本来准备用zabbix来监控的,需要重复造轮子,本来准备用kafka-Manager的,在GitHub上无意发现了kafka-eagle,看了官方介绍准备试一下..... ...
- 02_互联网基本原理和HTML入门
上节课的知识复习 互联网的原理:服务器.浏览器.HTTP.知道网页文件是真实的物理存在,用HTTP请求这个文件. 要知道网址的含义:http://www.iqianduan.cn/aaa 请求哪个文件 ...
- 《Vue.js 2.x实践指南》 已出版
<Vue.js 2.x实践指南>其实在一年前就已经完稿了,只是由于疫情的缘故耽搁了很久才下厂印刷.阅读本书需要具备HTML.CSS和JS基础,本书针对的用户群体主要是:想要快速学习vue技 ...
- 【漫画】JAVA并发编程 如何解决原子性问题
原创声明:本文转载自公众号[胖滚猪学编程],转载务必注明出处! 在并发编程BUG源头文章中,我们初识了并发编程的三个bug源头:可见性.原子性.有序性.在如何解决可见性和原子性文章中我们大致了解了可见 ...
- [带符号大整数模板]vector版
#include <iostream> #include <cstdio> #include <vector> #include <cstring> u ...
- OpenStack黄金十年:我与OpenStack的故事
导读:从2010年到2020年,OpenStack项目整整走过了十个春夏秋冬.不管是OpenStack基金会,还是积极参与OpenStack社区的厂商.企业乃至开发者,想必都有肺腑之言想对OpenSt ...
- Java并发编程(04):线程间通信,等待/通知机制
本文源码:GitHub·点这里 || GitEE·点这里 一.概念简介 1.线程通信 在操作系统中,线程是个独立的个体,但是在线程执行过程中,如果处理同一个业务逻辑,可能会产生资源争抢,导致并发问题, ...
- Codeforces Round #643 (Div. 2)(C ~ E)
C. Count Triangles 题目链接 : https://codeforces.com/contest/1355/problem/C 题目大意 : 给你 A , B , C , D 问有多少 ...
- webpack的proxytable的配置
这个一定不能忘记了/rest/后面的/,否则就是404找不到接口 这样的实现效果是 this.axios.post('/api/delShare', qs.stringify({'Id':Number ...
- Dynamics 365 联系人Contact的快速创建窗体,如何知道父窗体是哪个实体,通过window.top.parent.Xrm.Page.getUrl()可以知道父窗体的URL
Dynamics 365 联系人Contact的快速创建窗体,如何知道父窗体是哪个实体?相信有人会遇到过这种头疼的问题,我这里分享一种方式: 在contact快速创建窗体的onload时间执行如下代码 ...