トップに戻るボタンをウェブサイトに追加する方法

公開: 2023-02-12

私たちは皆そこにいました。あなたは素晴らしいオンラインガイドを見つけ、一番下までスクロールして、「うわー、このサイトで他に何が提供されているか知りたい!」と思いました。

ただし、スクロールする必要があります。

全て。

THE。

道。

に。

THE。

上。

そして、あなたは思う…。「うーん、気にしないで」そしてページを閉じます。

Web デザイナーとして、これは、あなたが構築しているサイトにアクセスしたときに、他のユーザーに行ってほしくないことです。幸いなことに、最新の Web デザインのベストプラクティスにより、この一般的な UX の問題に対する解決策が得られました。

スティッキーのトップに戻るボタンとは何ですか?

トップにスクロールするボタンまたはトップに移動するイメージとも呼ばれる、トップに戻る粘着性のあるボタンは、ユーザーが表示中の Web ページのトップに戻るのに役立つ便利なナビゲーション要素です。一般的な UI パターンでは、このボタンを画面の右下隅に配置し、固定位置を介して「スティッキー」にすることで、ユーザーがページを下にスクロールしても常にアクセスできるようにします。

トップに戻るボタンを追加する前に考慮すべきこと

一般的なデザイントレンドと同様に、サイトに実装する前に一歩下がって自問することをお勧めします。これを構築する場合、どのバックトップボタンのガイドラインに従う必要がありますか?

一番上にスクロールするボタンを作成する前に、いくつかの質問に答えてください。

それはどこに置かれますか？
どのくらいの大きさ（または小さい）にする必要がありますか？
ブランドを維持するためには、どのようなデザインパターンに従う必要がありますか? (色、フォント、アイコンなどを考える)
サイドバーの情報など、重要なサイトコンテンツを覆い隠す危険性はありますか?
モバイルデバイスではどうなりますか? レスポンシブになりますか？
本当に必要ですか? *

*注意:今日のユーザーは、ページを下にスクロール (および上に戻る) するように条件付けられていると主張できます。これにより、トップに戻るボタンの「必要性」がなくなります。私のアドバイス：テストしてください！クリック時に Google アナリティクスイベントを追加するか、Hotjar などのヒートマップツールを使用して、サイト訪問者がどのようにページを操作しているかを確認します。

従うべき最良の「ベストプラクティス」は、自分のサイトとユーザーのデータに基づくものです。

WordPress サイトに固定の Back-to-Top ボタンを追加する方法

このチュートリアルでは、ここで使用するトップに戻るボタンを正確にレイアウトに追加する方法を紹介します! 唯一の違いは、画面の右下隅ではなく、上部のスティッキーヘッダーに配置したことです。（しかし、心配しないでください、それは同じ概念です！）

プロのヒント:このチュートリアルはあまり高度ではありませんが、ステージングサイトまたはローカル環境で試してみることをお勧めします。そのため、実際のサイトにリスクはまったくありません。すぐにセットアップする必要がある場合は、信じられないほど使いやすい無料のローカル WordPress アプリである Local をチェックしてください。

または、粘着性のあるトップに戻るボタンを追加するこのビデオチュートリアルをご覧ください。

CodePen の Josh Lawler (@joshuamasen) による Pen ES6 Scroll-to-top ボタンを参照してください。

この粘着性のあるトップに戻るボタンのチュートリアルでは、次の 3 つの言語を使用します。

ボタンを作成するためのマークアップの HTML
ボタンのスタイルを設定し、ブランドに合わせるための CSS
それを「機能」させ、ボタンの動作を定義するJavaScript

HTML には、次の行があります。

 <a class="top-link hide" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">トップに戻る</span>
</a>

これがトップに戻る固定ボタンになります。 .top-linkと呼ばれる CSS クラスを追加し、簡単な JavaScript を使用して「機能させる」ことができます。また、ボタンにはインライン SVG を使用しています。

SVG 以外に、画像ファイルまたはフォントアイコンを使用してボタンを作成することもできます。ただし、次の理由から、SVG 方式をお勧めします。

ラスター画像のように、異なる画面サイズでピクセル化されることはありません。
SVG は、ブラウザ間で広くサポートされています。（やった、ユーザーエクスペリエンス！）
CSS で簡単にスタイルを設定できるので、すべてを簡単に変更できます。
1 行のコードしか必要としないため、軽量でサイトのパフォーマンスが向上します。

HTML の最後にある重要な部分は、次の行です。

 <span class="screen-reader-text">トップに戻る</span>

これは、スクリーンリーダーを使用しているユーザーにとって重要であり、WordPress サイトのアクセシビリティを向上させます。 (画像の alt タグのように考えてください。ただし、一番上にスクロールするボタンの場合です!)

では、その CSS クラス.top-linkについて詳しく説明しましょう。これを使用して実際にボタンのスタイルを設定します。ここで、ボタンの大きさ、周りのパディングの量、色などの品質を定義します。

 .トップリンク {
  トランジション: すべての .25s イーズインアウト。
  位置: 固定;
  下: 0;
  右: 0;
  表示: インラインフレックス;
  
 カーソル: ポインタ;
 整列項目: センター;
 正当化コンテンツ: センター;
 マージン: 0 3em 3em 0;
 境界半径: 50%;
 パディング: .25em;
 幅: 80px;
 高さ: 80px;
 背景色: #F8F8F8;

注: CSS を少し速く作成するために、Sass (スタイルシート言語) を使用しています。このプリプロセッサの詳細については、こちらをご覧ください。

このスニペットのいくつかの重要な部分: transition: all .25s ease-in-out ; ボタンが画面上で表示または非表示になる速度を制御します。position position: fixed ; これにより、ボタンが目的の場所に「くっつく」ようになります。

次に、 .showと.hideのルールが表示されます。 JavaScript を使用してこれらのクラスを切り替え、いつボタンをページに表示するか (または表示しないか) をブラウザーに伝えます。

 。見せる {
    可視性: 可視;
    不透明度: 1;
  }
  
  。隠れる {
    可視性: 非表示;
    不透明度: 0;
  }

JavaScript に入る前に、CSS に追加する行がいくつかあります。

 svg {
 塗りつぶし: #000;
 幅: 24px;
 高さ: 12px;
}
&:ホバー {
 背景色: #E8E8E8;
 	svg {
	 塗りつぶし: #000000;
	}
}

これらのクラスは、矢印自体の SVG イメージのスタイルを設定し、ユーザーがボタンの上にカーソルを置いたときにボタンを表示する方法をブラウザに伝えます。

最後に、スクリーンリーダーの「トップに戻る」というテキストを非表示にする CSS を追加します。

 // スクリーン リーダー専用のテキスト。
.screen-reader-text {
	位置: 絶対;
	クリップ パス: インセット (50%);
	マージン: -1px;
	ボーダー: 0;
	パディング: 0;
	幅: 1px;
	高さ: 1px;
	オーバーフロー: 非表示;
	ワードラップ: 通常!重要;
	クリップ: rect(1px, 1px, 1px, 1px);
	＆：集中 {
		表示ブロック;
		上: 5px;
		左: 5px;
		Z インデックス: 100000; // WP ツールバーの上
		クリップパス: なし;
		背景色: #eee;
		パディング: 15px 23px 14px;
		幅: 自動;
		高さ: 自動;
		テキスト装飾: なし;
		行の高さ: 通常;
		色: #444;
		フォントサイズ: 1em;
		クリップ: 自動!重要;
	}
}

では、JavaScript に進みましょう。 jQuery を読み込まずにこれを行います。これにより、コードを軽量に保ち、すばやく読み込むことができます。

最初の変数は、ブラウザがボタンを見つけるのに役立ちます。

 // ボタン要素の変数を設定します。
const scrollToTopButton = document.getElementById('js-top');

次に、ユーザーが最初のウィンドウの高さを超えてスクロールした場合に、スクロールトゥトップボタンを表示する関数を作成します。

 const scrollFunc = () => {
  // 現在のスクロール値を取得
  let y = window.scrollY;
  
  // スクロール値がウィンドウの高さよりも大きい場合は、それを表示するためにスクロール ツー トップ ボタンにクラスを追加しましょう!
  もし (y > 0) {
    scrollToTopButton.className = "トップリンク表示";
  } それ以外 {
    scrollToTopButton.className = "トップリンク非表示";
  }
};

また、ユーザーがスクロールするのを監視するイベントリスナーも追加します (ユーザーがページのどこにいるかがわかります)。

 window.addEventListener("scroll", scrollFunc);

ほぼ完了しました！次に、ボタンが実際にユーザーをページのトップに戻す関数を定義する必要があります。そのために、ページの上部からのピクセル数の変数を作成します。その数値が 0 より大きい場合、関数はそれを 0 に戻し、トップに移動します!

ここで少しアニメーションを追加して、ジャンプが急すぎないようにします。

 const scrollToTop = () => {
  // ドキュメントの上端からのピクセル数の変数を設定しましょう。
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // その数値が 0 より大きい場合は、0 またはドキュメントの先頭にスクロールして戻ります。
  // また、requestAnimationFrame でそのスクロールをアニメーション化します。
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  もし (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo は x 座標と y 座標を取ります。
    // '10' の値を大きくすると、スクロールがスムーズ/遅くなります!
    window.scrollTo(0, c - c / 10);
  }
};

大事なことを言い忘れましたが、誰かがスティッキーなトップに戻るボタンをクリックしたときにその機能を実行するようにページに指示する必要があります。

 // ボタンがクリックされると、上記の ScrolltoTop 関数を実行します!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  トップにスクロールします（）;
}

それでおしまい！これで、WordPress サイトに、完全に機能し、カスタマイズ可能な粘着性のあるトップに戻るボタンが表示されます。