ページトップボタン

概要

HTMLコード

bodyタグにid="#pagetop"を設定します。

<body id="pagetop"></body>

ページトップボタンは下記のコードにより実装されます。

<a class="pagetop" href="#pagetop" aria-label="このページの先頭へ">TOP</a>

最小設定

new PageTop(".pagetop");

TOP

<a class="pagetop" href="#pagetop" aria-label="このページの先頭へ">TOP</a>

デフォルトでは200px以上スクロールした時にボタンが表示されます。

オプション

オプション	概要
target	フッター等の基準要素のセレクターを指定します。（省略可）
threshold	ボタンが表示されるスクロール閾値を指定します。（省略可）
activeClass	表示時に付与されるクラス名を指定します。（省略可）
bottomClass	フッター到達時に付与されるクラス名を指定します。（省略可）

target

target: string | null = null

フッター等の基準要素のセレクターを指定します。この要素に近づくとボタンがabsoluteポジションに切り替わります。

new PageTop(".pagetop", {
  target: "footer",
});

targetを指定することで、フッターに重ならないようにボタンの位置が調整されます。

threshold

threshold: number = 200

ボタンが表示されるスクロール閾値をピクセル単位で指定します。

new PageTop(".pagetop", {
  threshold: 500,
});

threshold: 0 を指定すると、ページ読み込み時からボタンが表示されます。

activeClass

activeClass: string = "is-active"

ボタンが表示される時に付与されるクラス名を指定します。

new PageTop(".pagetop", {
  activeClass: "is-visible",
});

CSSでボタンの表示・非表示アニメーションを制御する際に使用します。

bottomClass

bottomClass: string = "is-bottom"

フッター等の基準要素に到達した時に付与されるクラス名を指定します。

new PageTop(".pagetop", {
  target: "footer",
  bottomClass: "is-at-footer",
});

フッター到達時の特別なスタイリングが必要な場合に使用します。

使用例

基本的な使用例

// 基本設定
new PageTop(".pagetop");

// 閾値なしで常時表示
new PageTop(".pagetop", {
  threshold: 0,
});

// カスタムクラス名
new PageTop(".pagetop", {
  activeClass: "show",
  bottomClass: "footer-mode",
});

実装要件

基本機能

スクロール監視：ページのスクロール位置を監視し、指定した閾値を超えた時にボタンを表示
スムーズスクロール：ボタンクリック時にページトップへのスムーズなスクロール動作
表示制御：CSS transitionと連携したスムーズな表示・非表示アニメーション
位置調整：フッター等の要素に重ならないような動的な配置制御

アクセシビリティ

キーボード操作：Tab移動とEnterキーでの操作対応
ARIAサポート：aria-labelによる適切なボタンの説明とaria-hidden制御
フォーカス管理：ボタンの表示・非表示時の適切なフォーカス状態管理
スクリーンリーダー対応：ボタンの目的と状態の明確な伝達