Simplicityを少し改造してみた 番外編 part19 トップへ戻るボタン付近にボトムスクロールボタンを追加

2016/05/25 ターゲットを超えた時にアイコンをローテーションする機能追加(全く不必要(笑)
2016/11/02 スクリプトを一部修正

Simplicityのトップへ戻るボタンは、600pxほどスクロールして初めて表示されます。
これらは親テーマのjavascript.jsに処理が記載されているため改変ができません。cssだけなら、子テーマでもできるわけですが、cssだけでは現在はクリックに反応することができず(方法がないわけでもない)、どうしてもjQueryの力を頼ることになります。

どうせjQueryでやるなら色々できたほうが良いわけですが、今回は、

  • 目的の場所を(予め)入力可能
  • (必要ないけれども)リサイズに対応
  • font-awesomeの任意のアイコンに対応
  • ボトムスクロールを追加するにあたって表示位置を変更
  • (必要ないけれども)スクロールターゲットをブラウザで判断

という5本立てになっています。

See the Pen トップへ戻るボタンにボトムダウンボタンを追加 by Hidekichi (@Hidekichi) on CodePen.

まず順番が異なりますが、まず表示位置の話から。どこに出るかわからないとアレなので。

ボトムスクロールを追加するにあたって表示位置を変更

だいたい皆さんがサイトを見る際にどのあたりにマウスカーソルをおいてスクロールなりをされてますか?
これは人それぞれなので色々なポジションがあると思いますが、僕はだいたい真ん中やや右下あたりでしょうか。真ん中あたりにカーソルがあるとどこにでも同じぐらいの距離でいけるので自然にそうしているんだろうと思うんですが、大きなボタンならいざ知らず、Simplicityのトップへ戻るは他の要素と重ならないようにしてあるのもあると思いますが、小さいですよね?それが右下にあるんです。

これは逆に操作しにくいということは無かろうかと常々思ってました。僕はFirefoxでマウスジェスチャーを使うかhomeボタンでトップへ戻るのでほぼ利用しない部分なんですけれども、それらを使わない人にとってはこの位置は使いにくいと思っていたんです。

PCで見る時に、他の要素のジャマにならないところというと#mainの右側辺りですよね。ここの真ん中ぐらいにあれば良い。ということで、タブレット以上のサイズとiPadのサイズあたりのものはメインの右側ボーダーに沿うようにしています。もしタブレットで#mainをwidth:100%とかにして画面いっぱいで利用している人がいたら、少しだけマージンを作って下さい。

タブレット以下の場合は従来と同じく右下にでます。スマホなんかではもしかすると左下付近の方が良いのかも知れないと思ったりもしたりしています。というのは、左手で本体を持って右手で操作している場合はどこでも良いのですが、小さめのスマホなら左手親指で操作できても良いかなぁと思いつつ、まぁ右下で良いかと、従来の位置になっています。

目的の場所を(予め)入力可能

例えばボトム方向へなにかしらスクロールさせるとして、その到達点をどこにするか。これは人それぞれの使い方があるかと思います。例えばコメントエリアであったり、関連記事であったり、あるいはフッターであったり。
それら用途に合わせられるようにセレクタを入れておくだけで目的部分を選べるようにしました。

これらはjs欄(jQuery部分)で言う所の、

ここにあたります。このbottomTargetを任意のcssセレクタにすることで、目的地を選べるという寸法です。基本下向きですがセレクタはどこでも構いません。上方向にももちろんスクロールできます(その必要があるか無いかは別として)。

またjs欄の上記bottomTargetの下にある、

ここを任意のタイトルにすると、マウスオーバーでこれらタイトルが表示されます。

(必要ないけれども)リサイズに対応

現在は767px以上と以下で処理が分けてあります。iPadの横幅は確か768pxだったと思うので、iPadならギリPCと同じ処理という感じです。まぁ上手く行かなくても右下には出るので問題ないかと思います。

現在のバージョンでは、リサイズする毎にと言うか、リサイズイベントが発生する毎にと言っても良いかと思いますが、常にブラウザの変化に対応して処理が開始されます。つまりは重いということです。これらはsetTimeoutを利用して、ブラウザのリサイズが終了した段階で処理をするという風に変えればより軽くすることができます。
が、そもそもリサイズを頻繁に行うほうが珍しいかと思うので一応対応しているという感じです。

font-awesomeの任意のアイコンに対応

Simplicityではカスタマイザーから、トップへ戻るボタンの種類をfont-awesomeのアイコンから選択することができます。これらを変更されている方もいるでしょうから、ボトムスクロールもアイコンが選べるようにしてあります。

これは、js欄(jQuery部分)で言う所の、

ここにあたります。

customIconの部分がクォートだけになってますが、ここに、font-awesomeから好きなアイコンを選んで設定することができます。bottomIconはデフォルトのものなので変更する必要はありません。もしcustomIconに何も入ってない場合は、bottomIconを利用するようにしてあります。

これらは、font-awesomeだけです。他のwebFontと言うか、iconFontを利用される場合はSimplicityの方も含めて変更する必要があります。もし何かしらSimplicityで画像をアップロードされているような場合は、

このあたりを書き換えて下さい。でspanの代わりにimgタグを入れればよいのではなかろうかと。試してませんが(笑)

(必要ないけれども)スクロールターゲットをブラウザで判断

実はここが一番の肝です。
前にフォーラムでわいひらさんには報告しましたが実装されていない部分で、実際そんなに効果はあるわけではないんですけれども、とある記事で、

このようにトップへ戻るのスクロールをアニメーション処理させた場合、ブラウザによってはbodyのスクロールとhtmlのスクロールの処理が重複して行われるという事を読んだことがあります。例えば、何かしらcallbackの処理をさせて、トップへ戻った時に、「トップへ戻りました」と表示させるというようなことをした場合、それらの処理が2回行われるということを意味しています。

確か、jQueryの1.8以前では、$.browserなんてのが使えまして、$.browser.wetkit ? weblitの場合 : そうでない時; と言うような処理ができました。がこれは廃止されてしまい、どこのサンプルでもたいてい上記コードのように、$(“body,html”)と書いてあるわけです。

webkitの場合はbodyの方で、firefoxなどはhtmlでと言う感じなんですが、body,htmlのどちらかしか読めないのであれば、特別問題ではないかも知れません。が、このjQueryのセレクタ指定( $(A,B) )は、「AとB」と言う指定なのです。ここらが問題点であるので、それらをちゃんと処理するべく、かつ短くできるように以下のように書きました。

こういうのは開発元がきちんと合わせてくれれば要らないことなんですけれども、とりあえず上記のように、ブラウザのユーザーエージェントを拾って、そこにwebkitが含まれる場合はbody、そうでない場合はhtmlと言う処理をしてあります。

これは前回、jQueryでモバイル判別と言う記事でも書いたもののの応用です。

Simplicityを少し改造してみた part16 jQueryでモバイル判別 bodyにmobile classを挿入

これらを実装してようやくサンプルという感じになりました。追記追記と言う感じで書いていたので不要な部分があるかも知れませんが、ひとまず動作はしているようです。

サンプルのcss欄は子テーマstyle.cssに追記します。js欄は子テーマjavascript.jsに追記して、これまでの説明通り必要な箇所を記入します(デフォルトでは、関連記事にスクロールするようにしてあります)。

こういうのをパーツスキンとして配布できたら良いんですけどね。できるのかどうかは試してないんですけれども、スキンの方でjavascriptが動作するようになったので、もしかするとここらも実装されているのかも知れません。その場合はパーツスキンとして配布可能なんですが・・・。

とりあえず実装してみたいという方は手動でやってみて下さい。

スポンサーリンク

シェアする

フォローする