更改route不会滚动到新页面的顶部?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (10)
  • 关注 (0)
  • 查看 (73)

我发现,当route改变时,它滚动不是在顶部,而是在中间。

我也在我的一个应用程序中找到了这个问题,我想知道如何才能让它滚动到顶部。

有没有方法可以在当route改变的时候滚动到顶部呢?

提问于
用户回答回答于

我找到了这个解决方案。如果你想转到一个新视图,则下面的函数将被执行。

var app = angular.module('hoofdModule', ['ngRoute']);

    app.controller('indexController', function ($scope, $window) {
        $scope.$on('$viewContentLoaded', function () {
            $window.scrollTo(0, 0);
        });
    });
用户回答回答于

如果你使用UI-路由器,你可以使用(运行中)

$rootScope.$on("$stateChangeSuccess", function (event, currentState, previousState) {
    $window.scrollTo(0, 0);
});
用户回答回答于
用户回答回答于

你可以通过以下方式关闭此行为autoscroll="false"你的ui-view...

例如:

<div ui-view="pagecontent" autoscroll="false"></div>
<div ui-view="sidebar" autoscroll="false"></div> 
用户回答回答于

使用angularjs UI线路管理器,我要做的是:

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

有:

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

用户回答回答于

我是这样解决的

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

PS,我发现自动滚动没有任何效果。

用户回答回答于

这段代码对我有用.要做的就是把$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)

运行块当你重定向到新的路由视图时,运行块中的侦听器将调用

$anchorScroll()

现在你可以发现可以做到滚动到顶部

用户回答回答于

经测试,它捕获按钮状态和替换状态,只在新页面导航到(后退/前进按钮保留滚动位置)时更新滚动位置:

.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');
})
用户回答回答于

只需运行

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

    window.scrollTo(0, 0);

});
用户回答回答于

问题是你的ngView加载新视图时保留滚动位置。你可以指定$anchorScroll若要“在视图更新后滚动视图”,执行以下操作

添加autoscroll="true"到ngView元素:

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

扫码关注云+社区