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在路由发生改变时,可以 ...
随机推荐
- vue后台管理系统介绍
项目GitHub地址:https://github.com/Little-Orange7/cmms-vue 一.简介 很多公司稍微复杂一点的业务,基本上都需要后台管理系统,来对业务进行各个维度的统计. ...
- NPM验证邮件,手机接受验证时出现service unavailable
NPM验证邮件,手机接受验证时出现service unavailable 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 问题原 ...
- spring内嵌jetty容器,实现main方法启动web项目
Jetty 是一个开源的servlet容器,它为基于Java的web容器,例如JSP和servlet提供运行环境.Jetty是使用Java语言编写的,它的API以一组JAR包的形式发布.开发人员可以将 ...
- 并发工具类——Semaphore
本博客系列是学习并发编程过程中的记录总结.由于文章比较多,写的时间也比较散,所以我整理了个目录贴(传送门),方便查阅. 并发编程系列博客传送门 Semaphore([' seməf :(r)])的主要 ...
- Go实战面试备忘录
原文地址:https://blog.likeli.top/posts/面试/go面试备忘录/ 一个小厂的面试,记录一下,答案不对的,请帮忙更正下 go部分 map底层实现 map底层通过哈希表实现 s ...
- [hdu5033]单调队列
题意:x轴上有n棵树,询问你站在某个点的视角.从左至右,单调队列(类似凸包)维护下.我强迫症地写了个模板QAQ #include <iostream> #include <cstdi ...
- java -> HttpServletResponse
HttpServletResponse HttpServletResponse概述 我们在创建Servlet时会覆盖service()方法,或doGet()/doPost(),这些方法都有两个参数,一 ...
- void 型指针的高阶用法,你掌握了吗?
[导读] 要比较灵活的使用C语言实现一些高层级的框架时,需要掌握一些进阶编程技巧,这篇来谈谈void指针的一些妙用.测试环境采用 IAR for ARM 8.40.1 什么是void指针 void指针 ...
- 如何在Github快速找到资源(资源快速检索)
github 资源检索 Github上的资源如漫天星辰,如果没有技巧,盲目的瞎找,想找到自己想要学习的的知识和资源如大海捞针!!!! 掌握正确的方法,可以说是"妈妈再也不用担心,你找不到代码 ...
- 【题解】[SCOI2015]小凸玩矩阵
题目链接 思路:题目要求变相解答一下,求出是否有n-k个数,不大于当前求的第k个数 而每一行每一列只能有一个数,就可以得到一个二分图的思路,边上的权值就是第i行第j列这个数的值 对于答案就是第k大的数 ...