Question

我想在我的ng-view div中加载新内容后在页面顶部自动滚动。

所以我实现了$ anchorScroll，并调用一个函数来跳转到页面顶部：

"use strict";

angular.module("someApp")
  .controller("ScrollCtrl", function($scope, $location, $anchorScroll) {
    $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
    }
  });

当我点击“下一步”按钮时，我想首先加载新页面，然后跳到顶部。但是，对于科西嘉，我点击“a-tag”，然后它立即跳到我的锚点：

 <a ng-href="#/ropute/to/new/content" ng-click="scrollTo('question_content')" >

我该如何避免这种情况？

Answer 1

那么您要做的是导航到/route/to/new/content，然后自动向下滚动到question_content元素？

在这种情况下，您当前的方法存在两个问题。首先是你的ng-click会在新视图加载并可见之前触发，因此它不会滚动到该元素。第二个是Angular已经使用url哈希来存储当前位置（除非你在html5Mode()上调用$locationProvider）。因此，将位置哈希设置为question_content将不会滚动到具有该ID的元素，它会告诉Angular尝试加载question_content的路由，我认为您没有。{ / p>

所以我将您的HTML更改为：

<a ng-href="#/route/to/new/content?scroll_to=question_content">

然后在您的body元素（或您的ng-view所在的同一元素）上设置指令，该指令会监听$viewContentLoaded事件，查找scroll_to位置搜索参数，查找该元素，计算它的顶部偏移量（通过jQuery）并将页面滚动到它。

$ anchorScroll仅在ng-view加载之后，而不是之前

1 个答案: