Angularjs 在页面加载后滚动到锚定（anchor）

我需要设置一个ng click事件，以便它加载一个新页面，然后，一旦页面加载完毕，滚动到页面上的一个定位点。我已经尝试了提出的每一个解决方案，但我不能让它正常工作

大多数解决方案都围绕着滚动到已经加载的页面上的锚定。我需要在加载新页面后出现滚动

以下是我的查看代码：

<div class="see-jobs-btn" ng-click="$event.stopPropagation();goToResultJobs(r)">See Jobs</div>

我尝试过使用

$anchorScroll

，只是将锚点硬编码到

profileUrl

，但两者都不起作用。我对Angular还不太熟悉，所以我不知道我在这里遗漏了什么

更新1:尝试使用$timeout

以下是my ResultsCtrl中的my

goToResultJobs

方法，该方法在用户单击按钮时触发：

$scope.goToResultJobs = function(result) {
    var url = window.location + result.slug + '#jobs';
    location.replace(url);
};

加载

/name#jobs

路径，该路径调用下面的ProfileCtrl：

app.controller('ProfileCtrl', ['$scope', '$http', '$timeout', '$location', '$anchorScroll',
function($scope, $http, $timeout, $location, $anchorScroll) {
    if(window.location.hash) {
        $timeout(function() {
            console.log('TEST');
            // $location.hash('jobs');
            // $location.hash('jobs');
            $anchorScroll();
        }, 1000);
    };
}]);

---

此设置似乎有效，因为

TEST

仅在单击“作业”按钮时显示在控制台中，而在用户仅单击配置文件时不显示。我现在面临的问题是，页面开始加载，url栏中的路径更改为

/name\jobs

，但在页面完成加载之前，

jobs

从url中剥离。因此，当调用

$anchorScroll（）

时，哈希中没有可滚动到的锚标记。

也许您可以在加载页面后使用本机Javascript？

尝试：

angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
  function ($scope, $location, $anchorScroll) {
      $scope.gotoBottom = function() {
      // set the location.hash to the id of
      // the element you wish to scroll to.
      $location.hash('bottom');

      $anchorScroll();
    };
}]);

“bottom”是要滚动到的html元素的id

---

此处的文档：

如前所述，

$anchorScroll

必须在页面呈现后出现，否则锚不存在。这可以通过使用

$timeout（）

实现

---

你可以看到。确保以弹出模式查看（输出屏幕右上角的蓝色小按钮）。

天哪，只需将

autoscroll=“true”

添加到模板中即可：

---

这里的关键是，无论使用何种滚动技术，都必须在页面加载后进行。即使是一个小的

$timeout

也应该有效。最好不要用问题回答问题。您是否尝试过使用

$timeout（$anchorScroll（））

？尝试过吗？我尝试过使用$timeout，但它似乎没有启动。我插入了console.log语句，但“TEST”从未出现在控制台中。有关更新的代码，请参见我上面的问题：是的，因为您离开了页面，然后尝试超时，该超时随着页面的更改而消失。尝试让

$timeout

挂起，以便在加载时执行它。散列应该已经在URL中了。那么$timeout应该在我的代码中的什么位置呢？正在加载的页面没有控制器，只有列出所有个人资料卡的页面。这是在我发布的问题链接中建议的。这不起作用，因为$anchorScroll需要在页面加载后启动。我将其移动到控制器内部（与plunkr中相同），但现在根本无法启动。您的控制台中是否有任何错误？该块中的代码不会被执行的唯一方法是，如果没有注入

$timeout

。我会注意到，

$location.hash

版本有问题。我在更新中看到您从

$anchorScroll

中删除了标记，这是我让它在plunkr中工作的唯一方法（当然，它是plunkr）所以我决定为我的纵断面图创建一个新的控制器，其中只有$timeout函数。现在，当页面加载完成时，函数将启动，但它的工作方式与我预期的不同。我将其设置为，当您单击配置文件卡时，它会将您发送到

/name#jobs

，但由于某种原因，在页面完成加载之前，路径可能会从该路径到

/name#

，并且不会滚动。我正试图弄明白为什么

乔布斯

被从url中删除。难以置信，绝对难以置信。

angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
  function ($scope, $location, $anchorScroll) {
      $scope.gotoBottom = function() {
      // set the location.hash to the id of
      // the element you wish to scroll to.
      $location.hash('bottom');

      $anchorScroll();
    };
}]);

$timeout(function() {
  $anchorScroll('myAnchor');
});