web-dev-qa-db-ja.com

Angularでページを読み込んだ後、アンカーまでスクロールします

新しいページを読み込むように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()が呼び出されると、ハッシュにスクロールするアンカータグがありません。

angularjsanchor-scroll
19
Daniel Bonnell

指摘したように、_$anchorScroll_はページのレンダリング後に発生する必要があります。そうでない場合、アンカーは存在しません。これは、$timeout()を使用して実現できます。

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

this plunkr を見ることができます。必ずポップアウトモードで表示してください（出力画面の右上隅にある小さな青いボタン）。

16
Tony

神聖な、これは単にautoscroll="true"テンプレートに：

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

ドキュメント

4
duhaime

試してください：

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

0
bamboo_inside