笔记:angular在路由跳转时,如何让跳转的页面显示在最顶端?

如果我在A页面把页面下拉了,再点击跳转到B页面,页面的位置不是现实的最顶端(而是A页面的页面位置)。

如何让页面每次跳转都把下一个页面的时候,都让页面显示在顶部:
使用 $anchorScroll
依赖:

$window $location $rootScope $anchorScroll

PS:官方文档说明请参考:
https://docs.angularjs.org/api/ng/service/$anchorScroll
或参考简书上的相关文章:
http://www.jianshu.com/p/9cd7c2d2710f

以下是我参考相关资料后在项目中的解决方法:
index.html:
body部分:在ui-view 的div 中加入id”view-pos”:

<body ng-controller="AppCtrl">
    <div ng-include="'app/header.tpl.html'"></div>
    <div ng-init="myInit()" id="view-pos" ui-view class="container-fluid"></div>
    <div ng-include="'app/footer.tpl.html'"></div>
</body>

app.js:

angular.module('authorization').controller('AuthController', ['$location', '$window', '$rootScope','$anchorScroll',
    function ( $location, $window, $rootScope,$anchorScroll) {
        $anchorScroll.yOffset = 30;   // 总是滚动额外的30像素(此处是因为我的项目中样式设置原因,需要加上以offset)
        $location.hash('view-pos');
        $anchorScroll();
    }
]);

但测试发现设置了id之后跳转的页面url后面都会加上id “#view-pos”,于是修改index.html中id值为空,同时app.js中 location.hash(viewpos)id location.hash(”) 或者$location.hash()),这样跳转的url上就不会带上id。

作者: Tsukiis
链接:http://www.imooc.com/article/17888
来源:慕课网

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值