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

Question

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

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

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

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

下面是我的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（）时，哈希中没有可滚动到的锚标记。

Answer 1

在我的例子中，在路由器中使用片段不起作用<代码>视口滚动条也不工作。即使他们这样做了，我还是希望保持URL的干净。所以，这就是我使用的：

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

Answer 2

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

文献资料

Answer 3

因此，正如所指出的，$anchorScroll必须在页面呈现后发生，否则锚不存在。这可以使用$timeout（）来实现。

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

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