[解決済み] AngularJSのScrollTo関数

質問

クイックナビを正しく動作させようとしています。サイドに浮いています。リンクをクリックすると、ページ上のそのIDに移動します。私は次のようにします。 ツリーハウスのガイド . これはスクロールのために持っているものです。

$("#quickNav a").click(function(){
    var quickNavId = $(this).attr("href");
    $("html, body").animate({scrollTop: $(location).offset().top}, "slow");
    return false;
});

最初は </body> . しかし、私はレースコンディションに遭遇しているようで、それはquickNavがコンパイルされる前に発射されました（それは ng-hide それが原因かどうかはわかりませんが、DOM内にあります）。

コンソールでそのコードのブロックを実行すると、期待通りにスクロールが動作します。

これをコントローラに、もっと言えばディレクティブの中に移動させるのが効果的だと考えました。しかし、それを達成するための運がありません。 このコードのブロックをAngularJSで動作させるにはどうしたらよいですか？

どのように解決するのですか？

以下は、クリック時に要素までスクロールする簡単なディレクティブです。

myApp.directive('scrollOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, $elm) {
      $elm.on('click', function() {
        $("body").animate({scrollTop: $elm.offset().top}, "slow");
      });
    }
  }
});

デモの様子 http://plnkr.co/edit/yz1EHB8ad3C59N6PzdCD?p=preview

ディレクティブの作成方法については、以下のビデオを参照してください。 http://egghead.io 10の「最初のディレクティブ」からご覧ください。

編集 : hrefで指定した特定の要素にスクロールするようにするには、単に attrs.href .

myApp.directive('scrollOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, $elm, attrs) {
      var idToScroll = attrs.href;
      $elm.on('click', function() {
        var $target;
        if (idToScroll) {
          $target = $(idToScroll);
        } else {
          $target = $elm;
        }
        $("body").animate({scrollTop: $target.offset().top}, "slow");
      });
    }
  }
});

そうすると、こんな風に使うことができます。 <div scroll-on-click></div> をクリックすると、クリックされた要素までスクロールします。 または <a scroll-on-click href="#element-id"></div> を指定すると、そのidを持つ要素にスクロールします。