ページトップへ戻る+スムーズスクロールとボタンの出現方法いろいろ【jQuery連載04】

前回は、ページの背景に一枚画像を表示させ、ランダム表示やフェード切り替えなどをおこないました。

今回は、縦長ページでのページの先頭部分へ戻る仕組みはページ内リンクで設定できるが、ここではページトップへの基本と移動アニメーションの動きについて、またボタンの現れるタイミングについていくつかとりあげてみます。

今回作成したサンプル

通常のボタンが下にあるパターンの他にフェードで現れるパターンとCSS3で下からアニメーションするパターンの3つを作成しました。

ページ下部にある通常配置のサンプルを見る

スクロールするとフェードでボタンが出現のサンプルを見る

スクロールすると下からアニメーションでボタンが出現のサンプルを見る

アンカーリンクとボタン部分のHTML

ページ先頭へ戻るのリンクにはページ内リンクとして、以前はa要素にname属性やid属性を使用していたが、HTML5からはページのアンカーを表すためだけa要素を使うことはできなくなり、name属性も廃止になりましたのでページ内リンク指定にはid属性のみで設定します。

</head>
<body>
<!-- HTML5では推奨ではないコード -->
<a name="top" id="top"></a>
<div id="wrapper">
<header id="headerContainer" >

<!-- 今回のコード -->
</head>
<body>
<div id="wrapper">
<header id="headerContainer" >

<!-- フッター部分のソースコード -->
<p class="pagetop inner"><a href="#wrapper">PAGE TOP</a></p>

ボタン部分のCSS

一つ目のサンプルのページ下部常に配置されているボタン

.pagetop {
  text-align: right;
  margin: 0 auto;
}

.pagetop a {
  display: inline-block;
  color: #fff;
  font-size: 1.2em;
  padding: 6px 2em 4px;
  border-radius: 4px 4px 0 0;
  background: #000;
}

一定のスクロール量でアニメーションしながら表示させるためのボタン

/*サンプル2*/
.pagetop2 {
  position: fixed;
  bottom: 24px;
  right: 24px;
  margin: 0 auto;
  z-index: 200;
}

.pagetop2 a {
  display: table-cell;
  width: 6em;
  height: 6em;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  font-size: 1.2em;
  line-height: 1;
  border-radius: 50%;
  background: #000;
  behavior: url(PIE.htc);  
}

/*サンプル3*/
.pagetop3 {
  position: fixed;
  bottom: -300px;
  right: 24px;
  margin: 0 auto;
  z-index: 200;
  visibility: hidden;
  -webkit-transition: bottom 0.4s linear;
  transition: bottom 0.4s linear;
}

.pagetop3.visible {
  bottom: 30px;
}

.pagetop3 a {
  display: table-cell;
  width: 6em;
  height: 6em;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  font-size: 1.2em;
  line-height: 1;
  border-radius: 50%;
  background: #000;
  behavior: url(PIE.htc);  
}

サンプル1：ページスクロールのJS（ボタン据え置きタイプ）

「ページの先頭へ戻る」ボタンが用意できたら、次に、ページの最上部へアニメーションしながら移動する仕組みと、ページがどれくらい下にスクロールされたかを取得し、一定量スクロールされたら「ページの先頭へ戻る」ボタンを表示する仕組みを作成します。

今回3つのタイプのページの先頭へ戻る仕組みを作成しましたが、ページ最上部へ移動する処理はすべて同じ記述になります。

1つ目のタイプは、「ページの先頭へ戻る」ボタンがフッタに付属していてCSSのみで設定されているので、Javascript（script_pagetop1.js）には移動処理のみ記述です。

;(function (d, $) {
  $(".pagetop a").on('click', function(e){
    e.preventDefault();    
    $('html, body').animate({
      scrollTop: $($(this).attr("href")).offset().top
      }, 1200, 'easeInOutQuart');
  })
})(document, jQuery);

サンプル2：ページスクロールのJS（ボタンフェードインタイプ）

2つ目のタイプは、ページが一定量スクロールすると「ページの先頭へ戻る」ボタンがフェードインし、先頭付近に戻るとフェードアウトするボタンです。

Javascript（script_pagetop2.js）には1つ目のタイプと同様に移動処理の他、ページのスクロール量の監視とボタン表示・非表示の処理を行っています。

;(function (d, $) {
  var $pagetop = isMobile()?$('.pagetop'):
  (function(){
   return $('.pagetop').removeClass('pagetop').addClass('pagetop2');
  })(), 
  pagetop_offset = 400;

  $pagetop.on('click', function(e){
      e.preventDefault();
      var _dest = $($(this).find('a').attr('href')).offset().top;      
      $('html, body').animate({
        scrollTop: _dest
      }, 1200, 'easeInOutQuart');
  });

  if( !isMobile() ) {
   $pagetop.hide();
   $(window).on('scroll', function () {
    if ($(this).scrollTop() > pagetop_offset) {
     $pagetop.fadeIn(400);
    } else {
     $pagetop.fadeOut(400);
    }
   });
  }
  
  function isMobile(){
   return typeof window.orientation != "undefined";
  }
 
})(document, jQuery);

サンプル3：ページスクロールのJS（ボタンスライドインタイプ）

3つ目のタイプは、ページが一定量スクロールすると「ページの先頭へ戻る」ボタンが下からスライドインし、先頭付近に戻るとスライドアウトするボタンになります。

Javascript（script_pagetop3.js）には2つ目のタイプとほぼ同様だが、アニメーションの処理にjQueryではなく、CSS3のtransitionプロパティを使用しています。

classセレクタ「visible」の有無でbottomプロパティの値が変化することで、スライドイン・スライドアウトさせています。

;(function (d, $) {
  var $pagetop = isMobile()?$('.pagetop'):
  (function(){
   return $('.pagetop').removeClass('pagetop').addClass('pagetop3');
  })(), 
  pagetop_offset = 50;

  $pagetop.on('click', function(e){
      e.preventDefault();
      var _dest = $($(this).find('a').attr('href')).offset().top;
      $('html, body').animate({
        scrollTop: _dest
      }, 1200, 'easeInOutQuart');
  });
  
  if( !isMobile() ) {
   $(window).on('scroll', function () {
    if ($(this).scrollTop() > pagetop_offset) {
     $pagetop.css('visibility','visible').addClass('visible');
    } else {
        $pagetop.removeClass('visible');
    }
   });
  }
   
  function isMobile(){
   return typeof window.orientation != "undefined";
  }
 
})(document, jQuery);

スクロールによってボタンがアニメーションしながら表示されます。

あとは動きを滑らかにするために「jquery.easing」を使用しています。

  $pagetop.on('click', function(e){
    e.preventDefault();
    $('html, body').animate({
      scrollTop: $($(this).attr("href")).offset().top
      }, 1200, 'easeInOutQuart');
  })

今回紹介したサンプルの詳細は『現場でかならず使われている jQueryデザインのメソッド』

今回紹介したサンプルは『現場でかならず使われている jQueryデザインのメソッド』にてサンプルダウンロードとコードの解説を行っております。

現場でかならず使われている jQueryデザインのメソッド

自分はここで18個のサンプルを担当しており、この連載でどんどん紹介していこうと思っています。

作成したサンプルや本の紹介はこちらをご覧ください。

すぐに使えるサンプルがたくさん！『現場でかならず使われている jQueryデザインのメソッド』発売いたしました。

今回は以上になります。

次回もベーシックですが、タブの作成を行います。タブによる情報の切り替えもjQueryではベーシックなものですが、いくつかバリエーションを作ったものを紹介していきます。

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

まずはここから始めよう！作業効率を早めるPhotoshopとIllustratorのショートカットまとめ（ファイル操作・コピペ・ズーム関連）

Instagram（インスタグラム）の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。

アプリ風インターフェイスのフォトギャラリーをCSS3で作成する【jQuery連載17】

マウスホイールに動きで横にスクロールの横長ページを作成する【jQuery連載16】

この記事に関連する記事