jQueryとCSS3で作るページの上までスクロールするボタン

今回はボタンが現れるパターンを3種類作ってみました。定番のフェードインして現れるものと、CSS3を使ったものがあります。まずはサンプルをご覧ください。

HTMLは全て同じです。

<a href="#" id="page-top1">上に戻る</a>

非常にシンプルです。

では、CSSとiQueryを1つずつ解説します。

1. フェードイン

まずはとても有名なやつです。ある程度スクロールするとフェードインして現れます。CSSは次のようになります。サンプルは縦に3つ並んでいますが、紹介するコードはすべて一番下に表示されるようにしています。

#page-top{
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: 10px;
  right: 10px;
  width: 80px;
  padding: 20px 10px;
  background: rgba(0,0,0,.7);
  color: #fff;
  text-align: center;
  text-decoration: none; 
}
#page-top:hover{
  background: rgba(0,0,0,.8);
}

背景はRGBaカラーで指定しています。IE8以下に対応する場合は、「background: #333; background: rgba(0,0,0,.7);」とRGBaの前にHEX値で背景を指定しておくといいです。

続いてjQueryです。

$(function(){
  var pageTop = $("#page-top");
  pageTop.hide();
  pageTop.click(function () {
    $('body, html').animate({ scrollTop: 0 }, 500);
    return false;
  });
  $(window).scroll(function () { 
    if($(this).scrollTop() >= 200) {
      pageTop.fadeIn();
    } else {
      pageTop.fadeOut();
    }
  });
});

5行目の500はページの上まで移動するのにかかる時間です。9行目の200は、何ピクセル分スクロールすればボタンが現れるを指定しています。

2. 回転して現れる

次はCSS3のtransitionを使って回転して現れるようにします。

#page-top{
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: 10px;
  right: 10px;
  width: 80px;
  padding: 20px 10px;
  background: rgba(0,0,0,.7);
  color: #fff;
  text-align: center;
  text-decoration: none;
  transform: rotateY(270deg);
  transition: .5s;
}
#page-top:hover{
  background: rgba(0,0,0,.8);
}

「transform: rotateY(270deg);」にしていてディスプレイに対して垂直になるため、見えません。スクロールしたときに「transform: rotateY(0deg);」にして通常の状態にすることで回転します。

$(function(){
  var pageTop = $("#page-top");
  pageTop.click(function () {
    $('body, html').animate({ scrollTop: 0 }, 500);
    return false;
  });
  $(window).scroll(function () {
    if($(this).scrollTop() >= 200) {
      pageTop.css( "transform", "rotateY(0deg)" );
    } else {
      pageTop.css( "transform", "rotateY(270deg)" );
    }
  });
});

3. 下から現れる

最後は下からボタンが現れます。仕組みは先ほどのものと同じです。

#page-top{
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: -60px;
  right: 10px;
  width: 80px;
  padding: 20px 10px;
  background: rgba(0,0,0,.7);
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: .5s;
}
#page-top:hover{ 
  background: rgba(0,0,0,.8);
}

「bottom: -60px」で最初は画面の外に置いておきます。スクロールしたときに「bottom: 10px;」にして下から現れるようにしています。

$(function(){
  var pageTop1 = $("#page-top1");
  pageTop1.click(function () {
    $('body, html').animate({ scrollTop: 0 }, 500);
    return false;
  });
  $(window).scroll(function () {
    if($(this).scrollTop() >= 200) {
      pageTop1.css( "bottom", "10px" );
    } else {
      pageTop1.css( "bottom", "-60px" );
    }
  });
});

さいごに

ということで、jQueryでクリックすると画面の上までスクロールするボタンの作り方を紹介しました。

最初から表示されていても問題ないわけですが、今回はボタンの現れ方を3種類作ってみました。transitionを使う方法は、右から出てきたり、ズームして現れたり、他にも色々できると思います。

trantisionはIE8以下は対応していませんが、動きがないだけでちゃんと表示されますので、私は気にせず使っています。

テキストではなく矢印にしても面白いですし、これを参考にご自分のボタンを作っていただければうれしいです。