21

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

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

这是我的视图代码：

<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

这是我goToResultJobs在 ResultsCtrl 中的方法，当用户单击按钮时触发：

$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()被调用时，哈希中没有可以滚动到的锚标记。

4

5 回答 5

18

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

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

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

于 2015-05-14T21:35:12.757 回答
4

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

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

文档

于 2016-09-14T17:54:59.590 回答
0

就我而言，使用fragmentinRouter不起作用。 ViewportScroller也没有工作。即使他们这样做了——我更愿意保持 URL 干净。所以，这就是我使用的：

(document.querySelector('.router-wrapper') as HTMLElement)?.scrollIntoView();
于 2021-08-13T11:15:06.160 回答
-1

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

于 2015-05-14T19:49:33.183 回答
-1

尝试：

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();
    };
}]);

这里的“底部”是要滚动到的 html 元素的 id。

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

于 2015-05-14T20:52:47.877 回答