[Javascript] ページの一番上までスクロールする簡単関数

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

スマートフォンではスクロースが極めてめんどくさいので、「TOPへもどるボタン」などを設置するケースが多いが、そんな程度でライブラリを使うのはアホらしい。
 

見た目重視のため、スクロールをアニメーションさせたいというのもよくわかるが、それを簡単に1つの関数だけで作った案件があったので、他でも使えそうと思って、ソースを載せておきます。

ソースコード

 

簡単解説

非常に簡単なのでさほど説明はいらないかもしれませんが、基本的にスクロール値である”y軸座標”の値を半分ずつ進んでいく仕様です。
 

一瞬にしてページトップにたどり着くので、もう少しゆっくり動かしたい人は、”document.scrollingElement.scrollTop / 2;”の箇所の”2″の数値を”1.1から2.0″の値にセットすると、その分遅くなります。
 

現在スクロール値からの移動距離の計算と理解してください。
 

あと、”document.scrollingElement.scrollTop < 10″の箇所は、最後に10よりも少ない値になると、”0″をセットしてループ終了にしています。
 

注意点としては、他のスクロール処理と併用した時に、無限ループに陥る可能性もあるので、必要があれば制御を追加してお使いください。

簡単な使い方

上記関数ファイルをページ内で読み込み、ボタンなどにセットするだけで動作します。
 

タグへの記述例は下記の通りです。
 

 

このようなボタンをセットしておくだけで、スマホなどで便利にページトップまで戻る事ができます。
 

専用のライブラリというレベルではなく、10行もない関数を一つページに構築するだけなので、お手軽に構築してしまいましょう。
 

あれ?これって、「bookmarkletにしておくか、ブラウザ機能拡張にしておけば便利じゃね?」とか考えてしまった・・・

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です