jQueryでページトップへ戻るボタンを簡単に作る方法【HTML/CSS】

WEB制作におけるメモシリーズ。

　

ページトップボタンの実装

まず、こんな感じの簡単なボタンを画面右下に配置。

　

HTML

<div class="scroll-top" id="top-bottun">
 <p>ページトップ</p>
</div>

divで囲っておくのは癖みたいなもんです。

お好みでどうぞ。

　

CSS

.scroll-top{
 position: fixed;
 bottom: 20px;
 right: 20px;
 background: #666;
 color: #FFF;
 width: 100px;
 text-align: center;
 cursor: pointer;
 z-index: 2;
}

ボタンの構造は本当に好みなので適当でいいです。

jQuery

$('top-bottun').hide();

$(window).scroll(function(){
 if($(this).scrollTop() > 100) {
  $('top-bottun').fadeIn();
 }
 else{
  $('top-bottun').fadeOut();
 }
});

$('top-bottun').on('click', function(){
   $('html, body').animate({scrollTop: 0 }, 500);
});

最初の1行目でボタンを隠しておきます。

3行目の塊で
100px分下にスクロールするとボタンがフェードインし、
100pxより上に行くとボタンがフェードアウトします。

12行目の塊でページトップに戻る処理がされています。

　

パソコン知識,プログラミングcss,HTML,レスポンシブ対応

Posted by daichan