ionicでanchorScrollを使う

ionicでアンカーを使ってion-contentをscrollさせる際にはまったのでメモ。

1.$ionicScrollDelegateを使う

ionicではAngularJSの\$anchorScrollが使えないため、代わりに\$ionicScrollDelegateを使う。

hoge-ctrl.js

$scope.scrollToAnchor = function(anchor) {
  $location.hash(anchor);
  $ionicScrollDelegate.anchorScroll(true);
};

2.$anchorScrollの自動スクロールをオフにする

デフォルトでは、\$location.hash()でアンカーを操作した際に自動で\$anchorScrollが動いてしまうので、自動スクロールをオフにする。

app.js

var application = angular.module('starter', ['ionic', 'starter.controllers']);
application.config(['$anchorScrollProvider', function($anchorScrollProvider) {
    $anchorScrollProvider.disableAutoScrolling();  // 自動スクロールをオフ
}]);

参考
https://forum.ionicframework.com/t/hashbang-scroll-cant-scroll-up-to-top-of-content-manually/633
http://knightso.hateblo.jp/entry/2014/10/23/093413