粘着性のあるトップツートップボタンをWebサイトに追加する方法

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

しかし、それからあなたはスクロールしなければなりません。

全て。

THE。

仕方。

に。

THE。

上。

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

ウェブデザイナーとして、これはあなたが構築しているサイトに着陸したときに誰かにやってもらいたい最後のことです。 幸いなことに、その年は2019年であり、最新のWebデザインのベストプラクティスにより、この一般的なUXの問題に対する解決策が得られました。

粘着性のあるトップツートップボタンとは何ですか？

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

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

他の人気のあるデザイントレンドと同様に、サイトに実装する前に一歩下がって自分自身に問いかけることをお勧めします。これを作成する場合、どのようなバックトップボタンのガイドラインに従う必要がありますか？

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

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

粘着性のある背中合わせのボタンをWordPressサイトに追加する方法

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

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

始めましょう！ プロセスの各ステップについて説明します。また、FlywheelのフロントエンドエンジニアであるJoshMasenのこのCodepenをフォローすることもできます。

CodePenのJoshLawler（@joshuamasen）によるPenES6Scroll-to-topボタンを参照してください。

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

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

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

<a class="top-link hide" href="" id="js-top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Back to top</span>
</a>

これはあなたの粘着性のある背中合わせのボタンになります！ .top-linkというCSSクラスを追加し、単純なJavaScriptを使用して「機能させる」ことがわかります。 ボタンにはインラインSVGも使用しています。

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

1. ラスターイメージのように、さまざまな画面サイズでピクセル化されることはありません。
2. SVGは、ブラウザー全体で広くサポートされています。 （そう、ユーザーエクスペリエンス！）
3. CSSを使用してスタイルを設定するのは簡単なので、CSSに関するすべてを非常に簡単に変更できます。
4. コードは1行しかかからないため、軽量でサイトのパフォーマンスが向上します。

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

<span class="screen-reader-text">Back to top</span>

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

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

.top-link {
  transition: all .25s ease-in-out;
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-flex;
  
 cursor: pointer;
 align-items: center;
 justify-content: center;
 margin: 0 3em 3em 0;
 border-radius: 50%;
 padding: .25em;
 width: 80px;
 height: 80px;
 background-color: #F8F8F8;

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

このスニペットからのいくつかの重要な部分： transition: all .25s ease-in-out ; ボタンが画面上でどの程度「速く」表示または非表示になるか、およびposition: fixedを制御します。 ボタンを希望の場所に「固定」するのはこのためです。

次に、.showと.showのルールが表示され.hide 。 JavaScriptを使用してこれらのクラスを切り替え、ボタンをページに表示する（または表示しない）タイミングをブラウザに通知します。

  .show {
    visibility: visible;
    opacity: 1;
  }
  
  .hide {
    visibility: hidden;
    opacity: 0;
  }

JavaScriptに入る前に、CSSに追加する行があと数行あります。

svg {
 fill: #000;
 width: 24px;
 height: 12px;
}

&:hover {
 background-color: #E8E8E8;

 	svg {
	 fill: #000000;
	}
}

これらのクラスは、矢印自体のSVGイメージを定型化し、ユーザーがボタンにカーソルを合わせたときにボタンを表示する方法をブラウザーに指示します。

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

// Text meant only for screen readers.
.screen-reader-text {
	position: absolute;
	clip-path: inset(50%);
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
	clip: rect(1px, 1px, 1px, 1px);

	&:focus {
		display: block;
		top: 5px;
		left: 5px;
		z-index: 100000; // Above WP toolbar
		clip-path: none;
		background-color: #eee;
		padding: 15px 23px 14px;
		width: auto;
		height: auto;
		text-decoration: none;
		line-height: normal;
		color: #444;
		font-size: 1em;
		clip: auto !important;
	}
}

では、JavaScriptに移りましょう。 jQueryをロードせずにこれを実行します。これにより、コードを軽量ですばやくロードできます。

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

// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');

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

const scrollFunc = () => {
  // Get the current scroll value
  let y = window.scrollY;
  
  // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
  if (y > 0) {
    scrollToTopButton.className = "top-link show";
  } else {
    scrollToTopButton.className = "top-link hide";
  }
};

また、イベントリスナーを追加します。これは、ユーザーがスクロールするのを監視します（したがって、ページ上のどこにいるかがわかります）。

window.addEventListener("scroll", scrollFunc);

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

ここに小さなアニメーションも追加するので、ジャンプが急になりすぎないようにします。

const scrollToTop = () => {
  // Let's set a variable for the number of pixels we are from the top of the document.
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // If that number is greater than 0, we'll scroll back to 0, or the top of the document.
  // We'll also animate that scroll with requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo takes an x and a y coordinate.
    // Increase the '10' value to get a smoother/slower scroll!
    window.scrollTo(0, c - c / 10);
  }
};

最後になりましたが、誰かが粘着性のあるトップに戻るボタンをクリックしたときにその関数を実行するようにページに指示する必要があります。

// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}

次へ：開発者が愛する19のWordPressプラグインを発見する

開発者に最も推奨されるプラグインのリストについては、この電子ブックをダウンロードしてください。 これらのプラグインはすべて、使いやすく、サイトのパフォーマンスがそれほど高くなく、まったく信頼できることがわかりました。

それでおしまい！ これで、WordPressサイトに完全に機能しカスタマイズ可能なスティッキーなバックツートップボタンが表示されます。 チュートリアル全体の動作を確認するには、FlywheelのフロントエンドエンジニアであるJoshMasenによるこのCodepenを確認してください。