Question

我需要设置一个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仅在单击“作业”按钮时出现在控制台中，而在用户仅单击该配置文件时则不会出现。我现在面临的问题是页面开始加载，并且网址栏中的路径更改为/name#jobs，但在页面加载完成之前，会从网址中删除jobs。因此，当调用$anchorScroll()时，哈希中没有锚标记可以滚动到。

Answer 1

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

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

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

Answer 2

天啊，只需将autoscroll="true"添加到您的模板即可实现：

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

Documentation

Answer 3

尝试：

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

Answer 4

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

Answer 5

我的解决方案

export function onAnchorClick(fragment){

  fragment.subscribe(f=>{
    const element = document.querySelector( "#" + f )
    if ( element ) {
      element.scrollIntoView({behavior: "smooth", block: "center", inline: "center"})
    }

  })
}

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

5 个答案: