jQuery でスクロールによる「ページトップへ戻るボタン」を画面右下に設置しました

ページトップへ戻るボタンを設置

サイトを見てくれる方の使い勝手をよくしようと考えて、「ページトップへ戻るボタン」を設置しました。参考にしたのはこちらのサイトです。

jQuery:スクロールで表示されるページトップの実装方法 | NxWorld

jQuery で作られていて、いろんなバリエーションが用意されています。デモを見ているだけでもおもしろいです。

ソースコードのカスタマイズ例

採用したのは以下のコード。もちろん、サイトのデザインに合わせて、いつくか変更しています。

【HTML】

サイトのロゴマークのところをclass属性で囲って、そこへのリンクを貼っているだけです。「▲」「上へ戻る」「Top」など、どのような記号や文字でもいいでしょう。

当ブログは、できるだけシンプルな「↑」にしました。

【jQuery】

コード内に数字がふたつ見られます。

はじめの700 とある数字を変更することで、「どれくらい下へスクロールしたら矢印が出てくるか」を調整でき、500 の方の数字を変更したらページのトップへ戻るスピードを調整できます。

この程度の長さであればHTML に直書き(インライン化)してもいいでしょう。そうされているサイトも多いです。

【CSS】

色や形、画面のどこに固定するかはお好みで。

当ブログは、PCだけでなく、タブレットで閲覧されている方がタップすることも考えて、ゆびさきくらいの大きさにしました。

jQuery によりプラグインに不具合が起きたときの対応

jQuery を導入するので、サイトによっては不具合が発生すると思います。

当ブログでは、広告が設置された場所に表示されずページの上にはみ出してしまったり、上下のサイト幅が若干広がりました。これはWordPress プラグインの「Autoptimize」と競合したことが原因です。

そこでプラグイン設定画面の上にある「Show Advanced settings」で詳細設定をひらき、「JavaScript Options」にある項目全てにチェックを入れました。

Autoptimize Options でJavaScript 全部にチェックを入れた

英文での説明にあるように、jQuery を使用した場合に発生する不具合にたいして、効果が期待できます。これで表示崩れや、jQuery が動かない状態も改善されました。

プラグインの機能であるJavaScript ファイルをまとめ、圧縮する働きも元に戻りました。

JavaScript の非同期読み込み、遅延ロード、ファイルまとめ系プラグインを利用されている方は、プラグインの詳細設定を変更するか、類似のプラグインに変更するなど、検討してみることをおすすめします。

さいごに

自分としては、ほかの多くのサイトを見ているときに、あまり使わない機能ですが、気になったサイトのほとんどには実装されていたので、設置することにしました。

しばらく様子を見て、訪問者にわずらわしく感じられるようならやめることにしますし、利便性が上がったと感じられたら継続していきます。

以下の本はjQuery 書籍で人気です。こちらでもうすこし勉強していきます。

 

関連記事

PageSpeed Insights で「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript / CSS を排除する」と提案されたときの修正方法

Google Developer では無料サービスの1つとして「PageSpeed Insights」という「ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための修正方法を提案してくれるツール」が提供されています。 Pag…

Twitter Cards をプラグインなしで設定してみました:Twitter カードアナリティクスも使えるようになった!

Twitter Cards とは? 「Twitter Cards」というのは、ふだんのTwitter投稿で表示されるスペースの下の部分に、設定した説明内容を追加するサービスです。たとえばサイト名や紹介文や画像などを入れることができます(リッ…