#目次

はじめに
実装方法
まとめ
参考

#はじめに
画面に表示しきれない部分がある場合、スクロールをしないと確認することができません。
ただその画面が長い場合、その画面内で目的のところを探すのに時間がかかります。
そこで今回はこの記事では目的の位置までスクロールする方法をご紹介します。

#実装方法
####①画面の作成

今回は5つのボタンを配置しました。それぞれのボタンをタップすると以下のような動作になります。

ボタン名	動作
FABの一番上へ戻る	一番上へスクロール
FABの一番下へ戻る	一番下へスクロール
利用規約へ戻る	一番上へスクロール
プライバシポリシーへ戻る	プライバシーポリシーまでスクロール
少し上へ戻る	このウィジェットから任意の位置へスクロール（今回は少し上へいくよう設定）

画面の構成は以下になります。

####②コーディング
frmTermsOfUseControllerのコーディングを行います。

frmTermsOfUse.js

define({
  
  //一番上へスクロール
  scrollToTop : function(){
    var self = this;
    self.view.flxScMain.scrollToWidget(self.view.flxItem1);
  },

  //該当ウィジェットへスクロール
  scrollToPosition : function(){
    var self = this;
    self.view.flxScMain.scrollToWidget(self.view.flxItem2);
  },

  //一番下へスクロール
  scrollToBottom : function(){
    var self = this;
    self.view.flxScMain.scrollToEnd();
  },

  //メソッド：setContentOffsetを使用して少し上の位置にスクロール
  scrollUseSetContentOffset : function(){
    var self = this;
    self.view.flxScMain.setContentOffset({"x":0,"y":"80%"}, true);
  }

});

上を説明します。

scrollToWidget：選択したウィジェットの位置までフォームをスクロールすることができます。
scrollToEnd：フォームの最後までスクロールすることができます。
setContentOffset：コンテンツをある位置から別の位置にオフセットすることができます。（今回は少し上へいくように設定しています）

####③Actionの紐付け
関数の準備ができたらActionと紐づけていきます。

flxScrollTop(FABの一番上へ戻る)を選択 > Actionタブをクリック > onClickのEditをクリック > Action(scrollToTop)紐づけ
flxScrollBottom(FABの一番下へ戻る)を選択 > Actionタブをクリック > onClickのEditをクリック > Action(scrollToBottom)紐づけ
btnScrollToItem1(利用規約へ戻る)を選択 > Actionタブをクリック > onClickのEditをクリック > Action(scrollToTop)紐づけ
btnScrollToItem2(プライバシポリシーへ戻る)を選択 > Actionタブをクリック > onClickのEditをクリック > Action(scrollToTop)紐づけ
btnScrollToItem3(少し上へ戻る)を選択 > Actionタブをクリック > onClickのEditをクリック > Action(scrollToTop)紐づけ

ここまでで、目的の位置までスクロールする実装が完了しました。
実際にどうなるかみていきましょう！

####④実装の確認

pic.twitter.com/GHYIa56PBC
— Kony (@Kony12763790) January 26, 2021

ボタンをタップすると目的の位置にスクロールされていることが分かりますね！

#まとめ
今回は、目的の位置までスクロールする方法について説明しました。
みなさんもぜひ活用してみてくださいね

#参考
Form Widgetのメソッド：
https://docs.kony.com/konyonpremises/Subsystems/Widget_User_Guide/Content/Form_Methods.htm

FlexScrollContainerのメソッド：
https://docs.kony.com/konyonpremises/Subsystems/Widget_User_Guide/Content/FlexScrollContainer_Methods.htm

規約の文の雛形：
https://kiyaku.jp/hinagata/gp.html