スクロール:

X軸・Y軸共に指定したNodeまでスクロール

X軸・Y軸共に操作して、指定したNodeまでスクロールさせる。
また、指定Nodeを基準にそれよりも前の任意の位置までスクロールバックさせる指定も可能。

Node
Nodeを指定 id値を文字列で指定してもよい
Number1
X軸のスクロールバックの値を指定 
0以上の整数で指定 ・「vw」付きの文字列で指定 / PC用とスマホ用として両方を配列に入れて渡すことも可能
Number2
Y軸のスクロールバックの値を指定 
0以上の整数で指定 ・「vw」付きの文字列で指定 / PC用とスマホ用として両方を配列に入れて渡すことも可能
Bool
アニメーションさせずに直接移動 省略した場合は false となる
true = ダイレクト移動 ・ false = アニメーション移動
●必須引数 ●オプション引数(省略可能)

記述例

$scrToNodeXY($id('nodeId'), 30, 50)
$scrToNodeXY($id('nodeId'), new Array(30, '5vw'), new Array(60, '10vw'))
$scrToNodeXY('nodeId', 0, 50, true)

注意点

スクロールバックの値にPC用(px)とスマホ用(vw)を渡した場合、スマホかどうかの判定は、klib独自変数の cellPhone で行っているので、実機で動作確認をする必要がある。
なお、PC上で動作確認をしたい場合は、klib.jsを読み込んだあとにJavascriptで一時的に「cellPhone = true」として上書きすることで可能となる。

CSSで「position:fixed」が設定されている要素の中にあるNodeは、スクロールに影響を受けないので指定することはできない。

動作サンプル

Javascript : $scrToNodeXY($id('node1'),0,45); $scrToNodeXY($id('node2'),0,45); $scrToNodeXY($id('node2_2'),0,45); $scrToNodeXY('samples',50,75); //『動作サンプル』に戻る $scrToNodeXY('node2_1',0,45,true); //ダイレクト移動 $scrToNodeXY('node2_2',50,95); //スクロールバックは左マージンと上マージン(ヘッダ分除く)を均等に
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。