在Angular中，页面加载后滚动到锚点。
在Angular中，页面加载后滚动到锚点。
我需要设置一个ng-click事件，使它加载一个新页面，然后，页面加载完成后，滚动到页面上的一个锚点。我尝试了这个SO帖子上提出的每个解决方案，但无法正确地使其工作。\n大多数解决方案都是围绕滚动到已加载的页面上的锚点。我需要在加载新页面后进行滚动。\n这是我的视图代码：\n查看职位\n这代表了一个在“个人资料卡”内部的按钮。当用户点击该卡片时，它会将他们带到个人资料页面。然而，当他们点击按钮时，它需要将他们带到该个人资料页面的#jobs部分（这就是代码中goToResultJobs(r)之前的$stopPropogation()）。\n这是我的goToResultJobs方法的样子。\n
$scope.goToResultJobs = function(result) {
var profileUrl = result.slug;
window.location = profileUrl;
};
\n我尝试过使用$anchorScroll和直接在profileUrl中硬编码锚点，但两者都不起作用。我对Angular还是比较新，所以不知道我漏掉了什么。\n更新1：尝试使用$timeout\n这是在用户点击按钮时触发的ResultsCtrl中的我的goToResultJobs方法:\n
$scope.goToResultJobs = function(result) {
var url = window.location + result.slug + '#jobs';
location.replace(url);
};
\n这将加载/name#jobs路径，调用下面的ProfileCtrl：\n
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);
};
}]);
\n这个设置似乎可以工作，因为当点击职位按钮时，控制台中只有在jobs按钮被点击时才出现\'测试\'。现在我面临的问题是，页面开始加载，url栏中的路径更改为/name#jobs，但在页面加载完成之前，jobs从url中删除。因此，当调用$anchorScroll()时，哈希中没有锚点标签可以滚动到。
在Angular中，当页面加载完成后，希望页面自动滚动到指定位置（锚点），但在我的情况下，使用`Router`中的`fragment`参数无效，使用`ViewportScroller`也无效。即使它们有效，我也更喜欢保持URL的简洁。
因此，我使用了以下方法来实现自动滚动到指定位置：
(document.querySelector('.router-wrapper') as HTMLElement)?.scrollIntoView();
上述代码中，`.router-wrapper`是一个包裹路由器内容的容器元素的CSS类名。通过将其作为选择器传递给`querySelector`方法，我们可以获取到该元素的引用。然后，我们将其转换为`HTMLElement`类型，并调用`scrollIntoView`方法来滚动到该元素的位置。
通过这种方法，当页面加载完成后，页面会自动滚动到指定位置，而无需使用`fragment`参数或`ViewportScroller`。这样可以保持URL的简洁性。
原因：
在Angular中，当页面加载完成后，页面会滚动到锚点位置。然而，有时候页面加载完成后并没有自动滚动到锚点位置的情况出现。
解决方法：
为了解决这个问题，可以通过在模板中添加autoscroll="true"来实现页面加载完成后自动滚动到锚点位置。
具体的解决方法如下所示：
<div autoscroll="true" data-ng-include='"/templates/partials/layout/text-column.html"'></div>
通过在模板的div标签中添加autoscroll="true"，就可以实现页面加载完成后自动滚动到锚点位置。
如果想了解更多关于autoscroll属性的信息，可以参考Angular的官方文档：Documentation。
这个解决方法非常简单，但是效果确实令人难以置信。
问题的原因是在页面呈现之后才能使用$anchorScroll，否则锚点不存在。可以通过使用$timeout()来实现这一点。
解决方法是将
$timeout(function() {
$anchorScroll('myAnchor');
});
放在控制器内部。确保在弹出模式下查看这个plunkr链接。
如果控制台没有报错，那么执行该代码块的唯一方式就是没有注入$timeout。
需要注意的是，使用$location.hash版本可能会遇到问题。可以在$anchorScroll中删除标签，这是我在plunkr中使其正常工作的唯一方法。
另外，或许你需要等待一段时间：$timeout(function() {...}, 500);
于是，我决定为我的个人资料视图创建一个新的控制器，其中只包含$timeout函数。现在当页面加载完成后，函数会触发，但它不像我预期的那样工作。我设置了当你点击个人资料卡片时，它会将你发送到/name#jobs，但出于某种原因，在页面加载完成之前，路径从那个变成了/name#，并且没有滚动。我正在努力弄清楚为什么jobs会从URL中被删除。