更改路线不会在新页面中滚动到顶部

Question

当路线改变时,我发现了一些不受欢迎的行为,至少对我而言.在教程http://angular.github.io/angular-phonecat/step-11/app/#/phones的第11步中, 您可以看到手机列表.如果您滚动到底部并单击最新的一个,您可以看到滚动不在顶部,而是在中间.

我也在我的一个应用程序中找到了这个,我想知道如何让它滚动到顶部.我可以手工做,但我认为应该有其他优雅的方式来做这个,我不知道.

那么,当路线改变时,是否有一种优雅的方式滚动到顶部？

Answer 1

问题是ngView在加载新视图时会保留滚动位置.您可以指示$anchorScroll"在视图更新后滚动视口"(文档有点模糊,但滚动到这里意味着滚动到新视图的顶部).

解决方案是添加autoscroll="true"到您的ngView元素:

<div class="ng-view" autoscroll="true"></div>

Answer 2

只需将此代码运行即可

$rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {

    window.scrollTo(0, 0);

});

Answer 3

这段代码对我来说非常有用..我希望它对你来说也很有用..你所要做的只是将$ anchorScroll注入你的运行块并将监听器函数应用到rootScope,就像我在下面的例子中所做的那样.

 angular.module('myAngularApp')
.run(function($rootScope, Auth, $state, $anchorScroll){
    $rootScope.$on("$locationChangeSuccess", function(){
        $anchorScroll();
    });

这是Angularjs模块的调用顺序:

1. app.config()
2. app.run()
3. directive's compile functions (if they are found in the dom)
4. app.controller()
5. directive's link functions (again, if found)

RUN BLOCK 在创建注入器后执行并用于kickstart应用程序..这意味着当您重定向到新的路由视图时,运行块中的侦听器调用

$ anchorScroll()

你现在可以看到滚动从新的路由视图开始到顶部:)

Answer 4

尝试的每个组合一两个小时后ui-view autoscroll=true,$stateChangeStart,$locationChangeStart,$uiViewScrollProvider.useAnchorScroll(),$provide('$uiViewScroll', ...),和许多人一样,我不能让滚动到顶部的新页按预期运行.

这最终对我有用.它捕获pushState和replaceState,仅在导航新页面时更新滚动位置(后退/前进按钮保留其滚动位置):

.run(function($anchorScroll, $window) {
  // hack to scroll to top when navigating to new URLS but not back/forward
  var wrap = function(method) {
    var orig = $window.window.history[method];
    $window.window.history[method] = function() {
      var retval = orig.apply(this, Array.prototype.slice.call(arguments));
      $anchorScroll();
      return retval;
    };
  };
  wrap('pushState');
  wrap('replaceState');
})

Answer 5

这是我(看似)强大,完整和(相当)简洁的解决方案.它使用缩小兼容样式(以及对模块的angular.module(NAME)访问).

angular.module('yourModuleName').run(["$rootScope", "$anchorScroll" , function ($rootScope, $anchorScroll) {
    $rootScope.$on("$locationChangeSuccess", function() {
                $anchorScroll();
    });
}]);

PS我发现autoscroll事件无论是设置为true还是false都没有影响.

Answer 6

使用angularjs UI路由器,我正在做的是:

    .state('myState', {
        url: '/myState',
        templateUrl: 'app/views/myState.html',
        onEnter: scrollContent
    })

附:

var scrollContent = function() {
    // Your favorite scroll method here
};

它永远不会在任何页面上失败,并且它不是全局的.

Answer 7

对于任何遇到标题中描述的问题的人(如我所做的那样),他们也在使用AngularUI路由器插件...

正如在这个问题中所提出的那样,当你改变路线时,angular-ui路由器会跳到页面底部.
无法弄清楚为什么页面在底部加载？Angular UI-Router自动滚动问题

但是,正如答案所述,您可以通过说明autoscroll="false"您的行为来关闭此行为ui-view.

例如:

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

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view

Answer 8

你可以使用这个JavaScript

$anchorScroll()

Answer 9

如果您使用ui-router,您可以使用(运行中)

$rootScope.$on("$stateChangeSuccess", function (event, currentState, previousState) {
    $window.scrollTo(0, 0);
});