• RSS

[JS]ブラウザを一定量スクロールさせるとボタンを表示させて固定させるカスタマイズ

  • このエントリーをはてなブックマークに追加
  • follow us in feedly


この記事は fine×3 様の記事を参考にさせていただきました。

jQuery を利用して、ブラウザを一定量スクロールさせることで非表示だったボタンなどの要素を表示させる方法です。

例えば、普段は「ページの先頭へ」のボタンは非表示にしておき、ページを一定量スクロールさせることで、ぼんやりボタンを出現させる、という処理です。

javascript ファイルのダウンロード

fine×3 様のサイトにてソースコードとデモが紹介さています。


javascript の処理

ページを 300px 以上スクロールすると #pagetop の要素を表示し、300px 未満であれば非表示にするという処理です。

var m = 300 の数値(スクロール量)は自由に変更することができます。


CSS でデザイン調整

あとは #pagetop 要素のデザインをCSS で補正してあげます。

ページ表示時点(300px 未満のスクロール量)では #pagetop は非表示なので display:none にしてあげます。

また 要素は固定させておくので position:fixed も加えています。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください