【AFFINGER6】「トップへ戻る」ボタンを作る！スクロールしながらページのトップに戻る方法！

AFFINGER6 ではページの右下に「トップへ戻る」ボタン（丸いアイコン）が標準実装されています。

標準のボタンとは別に、ページ下に「トップへ戻る」ボタンを配置して、押下時にスクロールしながらページ最上部へ戻る機能の実装方法を紹介します。

ポイント

「トップへ戻る」ボタンの実装は、直帰率の改善に効果的です。

＼AFFINGER でオシャレサイトを作る方法はこちらをクリックしてください／

1 「トップへ戻る」ボタンの実装イメージ
- 1.1 ■ 「トップへ戻る」ボタン
- 1.2 ■ AFFINGER6 の標準の「トップへ戻る」アイコン
2 「トップに戻る」ボタンの実装方法
3 まとめ

「トップへ戻る」ボタンの実装イメージ

■ 「トップへ戻る」ボタン

本記事で紹介する「トップへ戻る」ボタンです。

ページ下部にボタンを配置し、クリックでページが上にスクロールして、ページの上部に戻ります。

ポイント

文量が多い記事などの場合に、記事を読み直したいユーザの操作利便性（ユーザビリティ）を向上します。

記事を読み終えたユーザが「トップへ戻る」ボタンを意識することでクリックにつながります。

サイト上部のヘッダーカードに導線を繋げ、ユーザのサイトからの離脱を防ぐ効果に期待します（Bounce Rate の改善効果を期待します）。

■ AFFINGER6 の標準の「トップへ戻る」アイコン

AFFINGER6 は標準でページの右下に「トップへ戻る」アイコンを実装しています。

ページを少し下にスクロールすると右下に丸いアイコンを表示して、クリックすると、（比較的ゆっくり）ページの上部に戻ります。

記事を読んでいる途中に先頭に戻りたいときに便利ですが、ちょっと目立ちにくい（気が付かない）。

「トップに戻る」ボタンの両方を併用するのが、両方のメリットを活かし、デメリットを補完していてよい方法だと思います。

■ 「トップに戻る」（TOPに戻る）ボタンの色を変える方法！

: 【AFFINGER6】「トップに戻る」（TOPに戻る）ボタンの色を変える方法！

AFFINGER6 では初期設定で「トップに戻るボタン」がページの右下に表示されています。この「トップに戻るボタン」の色の変え方、形の変え方など、カスタマイズ方法を紹介します。

続きを見る

「トップに戻る」ボタンの実装方法

今回は、AFFINGER6 の機能を最大限に活かして、すべてのページの下部にボタンを設置する方法として紹介します。

※ 「STINGERタグ管理プラグイン」を利用します。

■ Step.1 ボタンの画像を用意する

「トップに戻る」ボタンの画像を用意します。自分で作るか、フリーや有料のサイトから用意します。

（クリックすると実際に動作します）

※ 上記の画像の流用はお控えくださいますようお願いします（著作権は当サイトが所有しています）

■ Step.2 フッター用の STINGER タグを用意する

WordPress の管理画面から「STINGERタグ」を新規作成して、任意の名前を付けてください。（ページフッターがわかる名前にするとよいです）

■ コードを一括管理（STINGER タグ管理プラグイン）のすごさと使い方

: AFFINGER 便利すぎる！コードを一括管理する「マイブロック」のすごさと使い方

WordPress で同じ広告を複数のページに貼っていて、広告が終了になり一気にすべて変えたいと思った時ありませんか？AFFINGER6のプラグイン「STINGER タグ管理プラグイン２」を使うことで、共通する広告やコードを一括してまとめて管理できます。詳しく紹介します。

続きを見る

■ Step.3 画像とコードを入力する

STINGER タグの本文にテキスト形式で次のコードを埋め込みます。

■ イメージを表示するコード例です

<figure class="wp-block-image size-large">
    <p id="my_pagetop">
        <a href="#">
            <img class="xxxxxx" src="（トップへ戻るのイメージのＵＲＬ）" alt="" />
        </a>
    </p>
</figure>

「（トップへ戻るのイメージのＵＲＬ）」は、イメージのURLに置き換えてください。

※ WordPress の編集方法（通常の方法）でイメージを貼りつけても良いですが、<p id="my_pagetop"> ～ </p> でリンクと画像をくくることが必要です。

■ クリックでスクロールさせるコード例です

<script>
$('#my_pagetop').click(
    function () {
        $('body,html').animate({scrollTop: 0}, 'normal');
        return false;
    }
);
</script>

■ 保存します

コードを入力して STINGER タグを保存します。

この際、「閲覧できません ( Forbidden access )」と表示されて保存できない場合があります。その場合は、以下の記事を参照してください。

■ 「閲覧できません ( Forbidden access )」エラー発生時の対応方法

: 【WordPress】閲覧できません ( Forbidden access ) （レンタルサーバー別対処方法を紹介）

WordPress で（主にコンテンツにスクリプトを書いて）保存した場合に、「閲覧できません」と表示されて保存ができない場合の原因と対処方法を簡単に説明します。

続きを見る