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

2018年9月19日

Javascript テクノロジー プログラミング

スマートフォンではスクロースが極めてめんどくさいので、「TOPへもどるボタン」などを設置するケースが多いが、そんな程度でライブラリを使うのはアホらしい。 見た目重視のため、スクロールをアニメーションさせたいというのもよくわかるが、それを簡単に1つの関数だけで作った案件があったので、他でも使えそうと思って、ソースを載せておきます。

ソースコード

function topScroll(){ if(document.scrollingElement.scrollTop < 10){ document.scrollingElement.scrollTop = 0; } else{ document.scrollingElement.scrollTop = document.scrollingElement.scrollTop / 2; setTimeout(topScroll , 10); } }

簡単解説

非常に簡単なのでさほど説明はいらないかもしれませんが、基本的にスクロール値である"y軸座標"の値を半分ずつ進んでいく仕様です。 一瞬にしてページトップにたどり着くので、もう少しゆっくり動かしたい人は、"document.scrollingElement.scrollTop / 2;"の箇所の"2"の数値を"1.1から2.0"の値にセットすると、その分遅くなります。 現在スクロール値からの移動距離の計算と理解してください。 あと、"document.scrollingElement.scrollTop < 10"の箇所は、最後に10よりも少ない値になると、"0"をセットしてループ終了にしています。 注意点としては、他のスクロール処理と併用した時に、無限ループに陥る可能性もあるので、必要があれば制御を追加してお使いください。

簡単な使い方

上記関数ファイルをページ内で読み込み、ボタンなどにセットするだけで動作します。 タグへの記述例は下記の通りです。 <a href="javascript:topScroll()">Topへもどる</a> このようなボタンをセットしておくだけで、スマホなどで便利にページトップまで戻る事ができます。 専用のライブラリというレベルではなく、10行もない関数を一つページに構築するだけなので、お手軽に構築してしまいましょう。 あれ?これって、「bookmarkletにしておくか、ブラウザ機能拡張にしておけば便利じゃね?」とか考えてしまった・・・

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。