angularJS在更改视图后不会滚动到顶部

17 浏览
0 Comments

angularJS在更改视图后不会滚动到顶部

例如：

用户在视图A上向下滚动；

然后用户点击一个链接，将用户带到视图B；

视图发生改变，

但用户的垂直位置保持不变，必须手动滚动到屏幕顶部。

这是一个angular的bug吗？

我写了一个小的解决方法，使用jquery滚动到顶部；但我找不到正确的事件来绑定它。

编辑在看到评论后：

我如何以及何时将自己拉到顶部？我正在使用jquery，但$viewContentLoaded事件太早了（该方法运行，但页面在那时不会滚动）

0

3 答案

0 Comments

问题出现的原因是在AngularJS中，当切换视图后页面没有自动滚动到顶部。

解决方法之一是按照评论中的建议，将函数包裹在$timeout中。另一种解决方法是将函数调用放在加载的部分中。

<!-- 新的部分-->
<div ng-init="scrollToTop()">
</div>

如果视图切换是由点击事件触发的，也可以将函数调用放在该元素上。这只是取决于时间的问题，具体取决于设置的方式。

0
0 Comments

问题：使用AngularJS切换视图后，页面没有滚动到顶部。

原因：ngView元素没有设置autoscroll属性。

解决方法：在ngView元素中添加autoscroll="true"属性。

具体代码如下：

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

参考链接：[https://docs.angularjs.org/api/ngRoute/directive/ngView](https://docs.angularjs.org/api/ngRoute/directive/ngView)

0
0 Comments

问题的原因是Angular在加载新视图时不会自动滚动到顶部，而是保持当前的滚动位置。解决方法是在bootstrap文件（通常称为app.js）中添加以下代码：

myApp.run(function($rootScope, $window) {
  $rootScope.$on('$routeChangeSuccess', function () {
    var interval = setInterval(function(){
      if (document.readyState == 'complete') {
        $window.scrollTo(0, 0);
        clearInterval(interval);
      }
    }, 200);
  });
});

这是一个纯JavaScript的解决方案（如果可以的话，最好不要使用jQuery）。

解释：该脚本每200毫秒检查一次新的DOM是否完全加载，然后滚动到顶部并停止检查。我尝试过没有这个200毫秒的循环，有时滚动失败，因为页面还没有完全显示出来。

此外，如果你使用的是默认的路由器，$routeChangeSuccess事件才会被触发。如果你有一些自定义的导航，你也可以监听$viewContentLoaded或$stateChangeSuccess事件。另外，如果你压缩代码，.run(function($rootScope, $window) {应该像这样调用：.run([ "$rootScope", "$window",function($rootScope, $window) {这两个问题让我花了很多时间才意识到，所以希望这对其他人有所帮助（你可能想要更新你的答案以包含这些信息）。

0