在 Angular 中加载页面后滚动到锚点答案

【问题标题】：Scroll to anchor after page load in Angular在 Angular 中加载页面后滚动到锚点
【发布时间】：2015-07-26 13:49:09
【问题描述】：

我需要设置一个 ng-click 事件，以便它加载一个新页面，然后在页面加载后滚动到页面上的锚点。我已经尝试了this SO post 上提出的所有解决方案，但我无法让它正常工作。

这些解决方案中的大多数都围绕滚动到已加载页面上的锚点。我需要在新页面加载后进行滚动。

这是我的查看代码：

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

这表示“个人资料卡”中的一个按钮。当用户点击卡片时，它会将他们带到个人资料页面。但是，当他们单击该按钮时，它需要将他们带到该个人资料页面的#jobs 部分（因此在代码中的 goToResultJobs(r) 之前有 $stopPropogation()）。

这是我的 goToResultJobs 方法的样子。

$scope.goToResultJobs = function(result) {
    var profileUrl = result.slug;
    window.location = profileUrl;
};

我尝试过使用$anchorScroll 并将锚点硬编码到profileUrl 中，但两者都不起作用。我对 Angular 很陌生，所以我不知道我在这里缺少什么。

更新 1：尝试使用 $timeout

这是我的 ResultsCtrl 中的 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()被调用时，hash中没有可以滚动到的锚标签。

【问题讨论】：

您是否尝试过使用$timeout($anchorScroll())？
试试anchorscroll
我尝试使用 $timeout 但它似乎没有触发。我插入了一个console.log 语句，但'TEST' 从未出现在控制台中。请参阅上面我的问题以获取更新的代码：
是的，因为您离开页面然后尝试进行超时，但随着页面的更改，超时就消失了。尝试让$timeout 挂出，以便在加载时执行。哈希应该已经在 URL 中。
那么 $timeout 应该在我的 Angular 代码中的什么位置？正在加载的页面没有控制器，只有列出所有配置文件卡的页面。

标签： angularjs anchor-scroll

【解决方案1】：

正如所指出的，$anchorScroll 必须在页面呈现后出现，否则锚点不存在。这可以使用$timeout() 来实现。

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

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

【讨论】：

我将它移到了我的控制器内部（与 plunkr 中的相同），但现在它根本不会触发。
您的控制台是否出现任何错误？该块中的代码不会被执行的唯一方法是如果你没有注入$timeout。
我会注意到$location.hash 版本有问题。我在您的更新中看到您从$anchorScroll 中删除了标签，这是我可以让它在 plunkr 中工作的唯一方法（当然，它是 plunkr）。
进一步说明，也许你真的要等：$timeout(function() {...}, 500);
所以我决定为我的配置文件视图创建一个新控制器，其中只有 $timeout 函数。现在该函数在页面完成加载时触发，但它不像我想要的那样工作。我进行了设置，以便当您单击个人资料卡时，它会将您发送到/name#jobs，但由于某种原因，在页面完成加载之前，路径可能会从该到/name#，并且没有滚动。我试图弄清楚为什么jobs 被从网址中删除。

【解决方案2】：

天哪，这可以通过简单地将autoscroll="true" 添加到您的模板来完成：

<div autoscroll="true" data-ng-include='"/templates/partials/layout/text-column.html"'></div>

Documentation

【讨论】：

不可思议，绝对不可思议。

【解决方案3】：

在我的情况下，在 Router 中使用 fragment 不起作用。 ViewportScroller 也不起作用。即使他们这样做了——我更愿意保持 URL 干净。所以，这就是我使用的：

(document.querySelector('.router-wrapper') as HTMLElement)?.scrollIntoView();

【讨论】：

【解决方案4】：

也许你可以在页面加载后使用原生Javascript的Element.scrollIntoView()？

【讨论】：

这里的关键是无论使用何种滚动技术都必须在页面加载之后发生。即使是一个小的$timeout 也应该可以工作。
最好不要用问题回答问题。

【解决方案5】：

试试：

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。

此处的文档：https://docs.angularjs.org/api/ng/service/$anchorScroll

【讨论】：

这是我发布的问题链接中建议的。这不起作用，因为 $anchorScroll 需要在页面加载后触发。