第4回　ページトップへ戻る+スムーズスクロールとボタンの出現方法いろいろ

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

解説：（有）ムーニーワークス　ハヤシユタカ

前回は、ページの背景に一枚画像を表示させ、ランダム表示やフェード切り替えなどを行いました。今回は、縦長ページでのページの先頭部分へ戻る仕組みはページ内リンクで設定できますが、ここではページトップへの基本と移動アニメーションの動きについて、またボタンの現れるタイミングについてjQueryやCSS3を使用したパターンをいくつかとりあげてみたいと思います。

■今回作成したサンプル

【サンプル1】：「ページ下部にある通常配置のサンプルを見る」
【サンプル2】：「スクロールするとフェードでボタンが出現のサンプルを見る」
【サンプル3】：「スクロールすると下からアニメーションでボタンが出現のサンプルを見る」

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

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

■■■■　HTMLコード

<!-- HTML5では推奨ではないコード -->
</head>
<body>
<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

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

■■■■　CSSコード

/*サンプル1*/
.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;
}

フッターにそのまま配置した場合

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

■■■■　CSSコード

/*サンプル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);  
}

CSS3で丸いボタンを作成

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

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

今回3つのタイプのページの先頭へ戻る仕組みを作成しましたが、ページ最上部へ移動する処理はすべて同じ記述になります。1つ目のタイプは、「ページの先頭へ戻る」ボタンがフッタに付属していてCSSのみで設定されているので、Javascript（script_pagetop1.js）には移動処理のみ記述です。

■■■■　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つ目のタイプと同様に移動処理の他、ページのスクロール量の監視とボタン表示・非表示の処理を行っています。

■■■■　JSコード

;(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プロパティの値が変化することで、スライドイン・スライドアウトさせています。

■■■■　JSコード

;(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」を使用しています。

■■■■　JSコード

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

今回は以上になります。

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

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

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

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

2014/10/8

●本連載で使用している書籍「現場でかならず使われている jQueryデザインのメソッド」

jQueryの特長は、通常のJavaScriptよりもシンプルなコードでWebサイトの動的なふるまいを記述できる点です。CSSと同じセレクタが利用できるので、HTML+CSSをひと通り理解していれば、文法や記述ルールはすぐに習得できます。書は、このようなjQueryの実践感覚を身につくように、アコーディオンやタブパネル、ツールチップといった頻出の基礎技術から、背景全面動画、パララックススクロールなどの現在流行している最新の手法まで、多彩なjQueryのテクニックを解説。現場の制作メソッドがぎっしり詰まった必携の一冊です！

Profile
【ハヤシユタカ】2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より教鞭をとる。2004年からは、デジタルハリウッド大学大学院、明治大学大学院非常勤講師を歴任。2012年からはデジハリオンラインスクールにてWEB関連講座のeラーニング教材の開発に携わり、会社・自宅のPCからいつでも「HTML5」「WordPress」を学べる講座を担当。2013年御苗場Vol12.横浜にて「The Zoological Garden ～言葉のない対話～」エプソン賞受賞。

こちらの連載もあわせてご覧ください
●WordPressでブログでなくビジネスサイトをつくろう：http://www.mdn.co.jp/di/articles/2782/
●ゼロからはじめるHTML5でのサイト制作：http://www.mdn.co.jp/di/articles/2605/
●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/

【著書・共著】
●現場でかならず使われている jQueryデザインのメソッド (2014/4/25)
●HTML5デザイン仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック (2014/3/24)
●現場で役立つCSS3デザインパーツライブラリ (2013/5/17)
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしいスタイルシートデザインの基本原則(2012/5/25)