ページの先頭に戻るボタン一旦開発完了

クラス名

el_toPageTop

マークアップ例

<a id="toPageTopBtn" href="#page" class="el_toPageTop">
	<span class="el_readerOnly">ページの先頭に戻る</span>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.13,20.56L8.41 18.75 15.52 12 8.41 5.25 10.13 3.44 19.15 12 10.13 20.56z"></path></svg>
</a>

CSS矢印
<a id="toPageTopBtn" href="#page" class="el_toPageTop"><span class="el_readerOnly">ページの先頭に戻る</span><span class="el_arrow"></span></a>

定義

機能
ページの先頭に戻る

あしらい・振る舞い
100px以上スクロールしたら右下に表示。スクロール量が100px未満になったら消える。
下からふわっと出てくる。jQueryでは状態変化（クラス名の変化）のみとし、アニメーションはCSSで実装する。JS無効の場合右下に固定表示。

特記事項
<a>タグを使い、CSS無効でも、上に戻るボタンであることがわかるように。

ライブラリ
jQuery

ファイルパス

利用しているライブラリ

• to-page-top.js ページの先頭に戻るボタンの状態変化用

Change Log

1. 開発開始：2021-09-30
2. 最終更新：2024-03-27