スマートフォンではスクロースが極めてめんどくさいので、「TOPへもどるボタン」などを設置するケースが多いが、そんな程度でライブラリを使うのはアホらしい。
見た目重視のため、スクロールをアニメーションさせたいというのもよくわかるが、それを簡単に１つの関数だけで作った案件があったので、他でも使えそうと思って、ソースを載せておきます。
ソースコード
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>
このようなボタンをセットしておくだけで、スマホなどで便利にページトップまで戻る事ができます。
専用のライブラリというレベルではなく、１０行もない関数を一つページに構築するだけなので、お手軽に構築してしまいましょう。
あれ？これって、「bookmarkletにしておくか、ブラウザ機能拡張にしておけば便利じゃね？」とか考えてしまった・・・
0 件のコメント:
コメントを投稿