ページトップリンク

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

ページトップリンク

ページトップリンクは、長いページの途中から先頭へワンタップで戻るための補助導線です。スクロール量がある一定を超えたら現れ、フッター付近では邪魔をしないよう止まる――このデモ集は、その「出現のさせ方」と「振る舞い」を9パターンに分解しています。

小さな部品ですが、実は表示条件・位置・動きの3点で設計判断が必要な、意外と奥の深いUIです。特に「指定の高さを超えたら出現」「フッター手前で停止」は、実サイトでそのまま使える実装です。

おさえておきたいところ

「ページトップリンク」を使う目的はこんな感じです。

             目的：ページの先頭へ迅速に戻る
動きのきっかけ：クリック / スクロール

ページの先頭にスムーススクロール

ページの指定の高さを超えたら出現（下から上）

ページの指定の高さを超えたら出現（右から左）

ページの指定の範囲内で出現（下から上)

ページの指定の範囲内で出現（右から左）

ページの指定の高さを超えたら出現しFooter手前で止まる

スクロール途中からリンクボタンの形状が変化

リンクボタンをクリックしたら形状が変化

スクロールの速さを変化させる（jquery.easing）

実務メモ（2026年追記）

現在の実装では、スクロール量の監視にscrollイベントを直接使うより、番兵要素を置いて IntersectionObserver で検知する方が軽く、フッター手前停止も同じ仕組みで書けます。スクロール自体はscroll-behavior: smoothで足りるため、jquery.easingのような速度カスタマイズは「こだわりたい場合だけ」の上乗せになりました。

• ボタンは右下配置が慣習。親指の届く位置とサイズ（44px以上）を確保
• モバイルの追従CTA（相談ボタン等）と重ならないよう優先順位を決めておく
• キーボード利用者向けに、リンクは<a href="#top">か<button>で正しく実装
• 行き先を制御する側の技術はページ内リンクとセットで

次回の予定

ページ内の目的の場所にスクロールさせる
「ページ内リンク」を作ってみようと思います＼＼\٩( ‘ω’ )و //／／