jQueryでページをスクロールしたら「ページの先頭へ」のリンクを表示/非表示する方法のご紹介です。
「ページへ先頭へ」リンクは、ページを開いた時には表示されませんが、少しスクロールする(今回の例ではページ上部から100px)とフェードインで表示され、リンクを踏んでページ先頭へ戻るとフェードアウトで非表示になる、という動きになります。
Javascriptの記述例
<head>タグ内に以下の記述を追加します。「ページへ先頭へ」リンクのクラスは
pagetop
にしています。
※fadeIn、fadeOutの値は1000にしていますが、ご利用のサイトに合わせて変更してみてください。
HTMLの記述例
「ページへ先頭へ」リンクを、ページのフッター要素の付近に記述します。
CSSの記述例
「ページへ先頭へ」リンクをページ右下の固定表示させるます。また、リンクの要素は
diplay:none
で非表示にしておきます。
※z-index、right、bottomの各値も、ご利用のサイトに合わせて変更してみてください。
以下のページにデモを用意しています。
一定量スクロールしてから「ページの先頭へ」ボタンを表示するデモ
コメント