AngularJSで、リンクをクリックした時に適切にスクロールさせたい

Question

AngularJSのページ内リンクを上手く処理できる方法について質問します。

<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa2-3">Question 3</h3>

のようなリンクに飛ばしたいだけなのですが、
上記のどのリンクをクリックしてもAngularJSがインターセプトし、全く別のページに飛んでしまいます（404-pageに移動します）。

どのように対処すればいいのでしょうか？
分かる人、教えて下さい。

Answer 1

おそらく$anchorScroll()を使えば解決するはずです。

マニュアル：https://docs.angularjs.org/api/ng/service/$anchorScroll

以下の様に、注入してコントローラーで呼ぶと、$location.hash()で見つかるIDを持つ要素までスクロールするようになります。

app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
}
});

<a ng-click="scrollTo('foo')">hoge</a>

<div id="foo">Hoge!!</div>

・ルーティングを使わない場合

angularルーティングを通常どおり設定し、以下のコードを追加します。

app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
//when the route is changed scroll to the proper element.
$rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
$location.hash($routeParams.scrollTo);
$anchorScroll(); 
});
});

するとリンクが以下のようになります。

<a href="#/test?scrollTo=foo">Hoge!!</a>