Pocket

ページの右下に固定で要素を配置

まずは、HTMLを以下のように準備。このサイトの右下に出てくるボタンの要素で、WordPressで作っているので、footer.phpファイル内に記述してます。

配置はCSSで対象になる要素をページの右下固定で設定します。このあたりはお好みで。

id属性の設定はJavaScriptのイベントトリガーとして使用します。

タッチイベントによるイベントトリガーの分岐

ボタンのイベントトリガーはクリックになりますが、スマートフォンなどのように画面をタッチするデバイスにはTouch event(タッチイベント)を持っています。クリックより先に動作が始まるので、クリックイベントでも動かなくはないですが一瞬遅延します。ですので、タッチイベントに対応しているデバイス(ブラウザ)であればタッチイベントをイベントトリガーにし、そうでなければクリックイベントで実装します。

id属性を指定したターゲット要素を変数に保持しておきます。

ページのトップまでスクロール移動させる

要素がクリック(タップ)されたらjQueryのanimateを使用して、ページのトップまでスクロールを移動させます。以下の通り(8〜11行目)イベントを追加しました。

9行目:クリック(タッチ)イベントに対して、preventDefaultを実行しています。もし対象がa要素やbutton要素だったりした場合、イベントが発火してしまうのでイベントをキャンセルさせます。(特にa要素はhref属性の指定先に遷移してしまいます)

10行目:ページのスクロール値(この場合、縦スクロール値)を持っているhtml要素とbody要素のスクロールの値を0(トップ)に500ミリ秒で戻す処理を書いています。これでクリック(タップ)すれば、500ミリ秒でページのトップまで移動してくれます。

プラグイン化してスクロールのスピードを自由に

jQueryプラグインの作り方をベースにこの処理をプラグイン化。

デフォルト値としてspeedパラメータを500(ミリ秒)に設定しておきます。これをHTMLファイル側で引数を渡してコールします。

できた!\(^o^)/完成〜!

アレンジ:スクロールが一定の位置まで移動したら表示

とりあえず完成したのですが、少々アレンジを。右下固定で表示しているのですが、ずっと出たままになっているのでスクロールの位置がある程度下がったら表示するようにしてみます。

  • 5行目 – scrollがどこまで下がったら表示するかの初期値(300px)
  • 13行目 – 要素を最初は非表示にしておく
  • 20〜26行目 – windowのscrollイベントトリガーで、スクロール位置がパラメータの値を越えたらfadeInするように設定

アレンジ完成!\(^o^)/
パラメータを増やしてフェードのスピードだったり、アニメーションの種類だったり、色々増やしてみても良いかも。

GitHub
※[jquery.topMove.js]フォルダに今回の記事のソースコードが入っています。

参考サイト

HTML5ROCKS: マルチタッチ ウェブ開発
https://www.html5rocks.com/ja/mobile/touch/