Autoscroll to TOP with ui-router and Angularjs

2019-01-30 05:43发布

站内问答 / JavaScript
576 7 4

I've read so many different problems with this and none of the solution given seem to fit my use case. I started by simply putting target="_top" on all my links, but that actually forces my app to reload which wont work. I've also seen people say they use autoscroll="true" but that only seems to work if its within my ui-view.

The issue with this is that in my index.html file I have fixed nav and other static elements that are above my first ui-view. This means when I go to other pages I lose the navigation as the page loads past those elements. I've also tried putting this on the body with:

<body autoscroll="true">
</body>

This doesn't seem to do anything either. So the question is, how can I make sure that new pages (new route changes from ui-router) result in starting at the top of the page? THANKS!

7条回答
Root（大扎）
2楼-- · 2019-01-30 06:22

Using version 1.0.6, the $stateChangeSuccess event is deprecated in favor of the $transitions service. Here is the code I used to scroll to the top on every state change:

app.run(['$transitions', function ($transitions) {
    $transitions.onSuccess({}, function () {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    })
}]);
查看更多
0人赞 添加讨论(0) 举报
三岁会撩人
3楼-- · 2019-01-30 06:25

There is an Angular service for this. https://docs.angularjs.org/api/ng/service/$anchorScroll

Sample Code:

.run(function ($rootScope, $state, $stateParams, $anchorScroll) {

    $rootScope.$on('$stateChangeStart', function () {
        $anchorScroll();
    });

});

If you want to scroll to a specific element

.run(function ($rootScope, $state, $stateParams, $anchorScroll) {

    $rootScope.$on('$stateChangeStart', function () {
       // set the location.hash to the id of
       // the element you wish to scroll to.
        $location.hash('bottom');

       // call $anchorScroll()
        $anchorScroll();
    });

});
查看更多
0人赞 添加讨论(0) 举报
够拽才男人
4楼-- · 2019-01-30 06:27

I had to do a combination of the other two answers.

<div ui-view autoscroll="false"></div>

In combination with

$rootScope.$on('$stateChangeSuccess', function() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
});

Note: This is on v0.2.15 of ui-router

查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
5楼-- · 2019-01-30 06:32

I had exactly the same problem, fixed navbar on route changes, page loading partially scrolled down the page.

I just added autoscroll="false" to ui-view, like so:

<div ui-view="main" autoscroll="false"></div>

edit

Just tested this method, bit of a dirty hack, but it works. Import angular services $anchorScroll & $location into the relevant controllers for ui-router .state config. Then use a $watch on ui-router $stateParams to call $location.hash('top'); on route/state changes.

https://docs.angularjs.org/api/ng/service/$anchorScroll

https://docs.angularjs.org/api/ng/service/$location#hash

.controller('myCtrl', function ($location, $anchorScroll, $scope, $stateParams) {

    $scope.$watchCollection('$stateParams', function() {
       $location.hash('top');
       $anchorScroll();
    });
});
查看更多
0人赞 添加讨论(0) 举报
干净又极端
6楼-- · 2019-01-30 06:36

If you want it to always scroll to 0 cross-browser, do nothing with autoscroll. Just place this your run block:

$rootScope.$on('$stateChangeSuccess', function() {
   document.body.scrollTop = document.documentElement.scrollTop = 0;
});
查看更多
0人赞 添加讨论(0) 举报
一夜七次
7楼-- · 2019-01-30 06:36

Did the same thing as the excepted answer from @TaylorMac but in $locationChangeStart.

index.run.js:

$rootScope.$on('$locationChangeStart', function() {
   document.body.scrollTop = document.documentElement.scrollTop = 0;
});

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)