Question

我正在使用AngularJS（MEAN.io堆栈），并且我遇到了与滚动相关的烦人故障。

当用户点击链接时，目标页面的位置与原始页面相同，而不是保持在最顶层。

为了解决这种奇怪的行为，我使用了下一步：

$rootScope.$on("$viewContentLoaded", function () {
  $anchorScroll();
});

但是这段代码使得每一页都在顶部位置进行滚动，这也很烦人，因为用户必须能够返回并恢复之前的滚动位置。

有什么建议吗？我怎样才能得到理想的结果？

谢谢！

编辑--------------------

当我尝试使用ng-view + autoscroll解决方案时，它对我不起作用，我不知道为什么。

这是我使用它的方式，在我的default.html页面中，由服务器提供：

<body ng-cloak class="ng-cloak" ng-class="{state: true, auth: authPage}" ng-controller="BodyController">

      <div ng-include="'/system/views/header.html'"></div>

    <section class="content">
      <div data-ng-include="'/ceh-admin/views/adminShortcuts.html'"></div>
      <div ng-view autoscroll="true">{% block content %}{% endblock %}</div>
    </section>

    <div data-ng-include="'/system/views/footer.html'"></div>

    {% include '../includes/foot.html' %}

  </body>

我的HTML代码有些奇怪吗？

Answer 1

根据ngView documentation，您需要声明如何处理滚动。

autoscroll（可选）字符串ngView是否应该调用$ anchorScroll   在视图更新后滚动视口。


如果未设置该属性，请禁用滚动。

如果设置的属性没有值，则启用滚动。

否则，仅当autoscroll属性值作为表达式计算得出真值时才启用滚动。

默认情况下禁用它，因此您需要在标记中添加以下内容：

<div ng-view autoscroll></div>

或（根据文档并视您的偏好而定）：

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

Answer 2

我不是最好的角度js，但我遇到了类似的问题，我使用以下代码修复它：

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

您可以在此处查看文档：{{3}}

我希望这有帮助

在AngularJS中始终滚动到顶部

2 个答案: