スクロール:

指定したNodeまでスクロール

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

Node
Nodeを指定 id値を文字列で指定してもよい
Number
スクロールバックの値を指定 
0以上の整数で指定 ・「vw」付きの文字列で指定 / PC用とスマホ用として両方を配列に入れて渡すことも可能
Bool
アニメーションさせずに直接移動 省略した場合は false となる
true = ダイレクト移動 ・ false = アニメーション移動
String
定速で移動させる場合は数値を単位付きで指定 設定した場合は、第3引数の指定は無視される
px = 1ステップの移動距離 ・ ms = 全体の移動時間(ミリ秒)
●必須引数 ●オプション引数(省略可能)

記述例

$scrToNode($id('nodeId'), 50)
$scrToNode($id('nodeId'), '4vw')
$scrToNode('nodeId', new Array(50, '4vw'))
$scrToNode('nodeId', 50, '1000ms')

注意点

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

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

動作サンプル

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