Question

我已经阅读了很多不同的问题，并且没有一个解决方案似乎适合我的用例。我开始简单地把target =＆＃34; _top＆＃34;在我的所有链接上，但这实际上迫使我的应用程序重新加载哪些不会工作。我也看到有人说他们使用 autoscroll =＆＃34; true＆＃34; ，但只有在我的 ui-view 中才能使用。

这个问题是在我的index.html文件中我修复了导航和其他静态元素，这些元素位于我的第一个ui-view之上。这意味着当我转到其他页面时，当页面加载超过这些元素时，我将丢失导航。我也试过把它放在身体上：

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

这似乎也没有做任何事情。所以问题是，如何确保新页面（ui-router的新路由更改）从页面顶部开始？谢谢！

Answer 1

如果您希望它始终滚动到0跨浏览器，请不要对自动滚动执行任何操作。只需将其设置为运行块：

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

Answer 2

我遇到了完全相同的问题，在路线更改时固定了导航栏，页面加载部分向下滚动页面。

我刚刚将autoscroll="false"添加到ui-view，就像这样：

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

修改

刚试过这个方法，有点脏兮兮，但它确实有效。导入角度服务$anchorScroll＆amp; $location进入ui-router .state config的相关控制器。然后在ui-router $watch上使用$stateParams在路由/状态更改时调用$location.hash('top');。

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

https://docs.angularjs.org/api/ng/service/ $位置＃散列

.controller('myCtrl', function ($location, $anchorScroll, $scope, $stateParams) { $scope.$watchCollection('$stateParams', function() { $location.hash('top'); $anchorScroll(); }); });

Answer 3

Using version 1.0.6，不推荐$stateChangeSuccess事件支持$transitions服务。以下是我在每次状态更改时滚动到顶部的代码：

app.run(['$transitions', function ($transitions) {
    $transitions.onSuccess({}, function () {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    })
}]);

Answer 4

有一个Angular服务。 https://docs.angularjs.org/api/ng/service/$anchorScroll

示例代码：

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

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

});

如果要滚动到特定元素

.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();
    });

});

Answer 5

我正在使用ui-router。我的跑步看起来像这样：

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

Answer 6

我必须将其他两个答案结合起来。

_id

与

结合使用

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

注意：这是在ui-router

的v0.2.15上

Answer 7

与@TaylorMac的例外回答相同，但是在$ locationChangeStart中。

index.run.js：

public HttpResponseMessage GetBookings(string contactId, string timeFilter = "upcoming", string bookedBy = null, string resourceTypeIds = null, string clientId = null (...), int pageSize = 25, int pageIndex = 0)
{
   (...)
}

使用ui-router和Angularjs自动滚动到TOP

7 个答案: