ページトップボタン

ページトップボタン デモ

概要

HTMLコード

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

<a class="p-pagetop-btn" href="#" aria-label="ページトップボタン">TOP</a>

最小設定

new PageTopButton(".p-pagetop-btn");
TOP 
<a class="p-pagetop-btn" href="#" aria-label="ページトップボタン">TOP</a>

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

オプション

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

target

target: string | null = null

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

new PageTopButton(".p-pagetop-btn", {
  target: "footer",
});

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

threshold

threshold: number = 200

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

new PageTopButton(".p-pagetop-btn", {
  threshold: 500,
});

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

offset

offset: number | null = 0

基準要素からのオフセット値をピクセル単位で指定します。正の値で基準要素より上に、負の値で下に調整されます。

new PageTopButton(".p-pagetop-btn", {
  target: "footer",
  offset: 50,
});

offsetを指定することで、フッターから離れた位置でボタンの位置調整を開始できます。

activeClass

activeClass: string = "is-active"

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

new PageTopButton(".p-pagetop-btn", {
  activeClass: "is-visible",
});

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

bottomClass

bottomClass: string = "is-bottom"

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

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

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

使用例

基本的な使用例

// 基本設定
new PageTopButton(".p-pagetop-btn");

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

// フッターに対する位置調整あり
new PageTopButton(".p-pagetop-btn", {
  target: "footer",
  offset: 30,
});

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