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

wordpressはプラグインがたくさんあって便利です。しかし、個人的には安易にプラグインを使うのではなく、自作できるものは自作できるよう心がけています。

今回紹介するのは前からよく使われている方法ですが、プラグインで実装している人も多いようなので紹介します。自分で作った方が自由ですし、無駄に大きなファイルにならないのでいいかと思います。

scroll-top-tittle1.png

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

HTMLは全て同じです。

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

非常にシンプルです。

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

1. フェードイン

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

CSS
#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です。

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を使って回転して現れるようにします。

CSS
#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);」にして通常の状態にすることで回転します。

jQuery
$(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. 下から現れる

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

CSS
#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;」にして下から現れるようにしています。

jQuery
$(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以下は対応していませんが、動きがないだけでちゃんと表示されますので、私は気にせず使っています。

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

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加