ページトップへ移動するアニメーション

スクロールすると表示されるトップへ戻るボタン

テキスト著者の解説

ページトップへ移動するアニメーション

f:id:web-design-lesson:20160627014000p:plain

《script.js》

$(function() { 
  var topBtn = $( '#page-top' );

  //ボタンを非表示
  topBtn.hide();

  //スクロールが100に達したらボタン表示
  $( window ).scroll( function () {
    if ( $(this).scrollTop() > 100 ) {
      topBtn.fadeIn();
    } else {
      topBtn.fadeOut();
    }
  });

  topBtn.on( 'click', function () {
    $( 'body, html' ).animate( { scrollTop: 0 }, 500);
    return false;
  });
});

スクロールさせる場合 animate メソッドと scrollTop プロパティを利用しますが、どのセレクタに対して実行すべきかはブラウザ（WebKit かそれ以外）により異なります

$('body').animate({ scrollTop: 0 }); // WebKit
$('html').animate({ scrollTop: 0 }); // WebKit以外

両方指定するとコールバックを指定している場合、コールバックが２回呼ばれてしまう場合があるので、記述をまとめます

$( 'body, html' ).animate({ scrollTop: 0 });

《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スクロールするとページトップへ戻るボタンがフェードして表示</title>
<link rel="stylesheet" href="style.css">
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="container">
<h1>スクロールするとページトップへ戻るボタンがフェードして表示</h1>

<div class="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">LINK</a></li>
</ul>
</div><!-- /.nav -->

<div id="content">
<h2>jQueryを使ったページトップへ戻るボタン</h2>
<p>
これはスクロールするとページトップへ戻るボタンがフェードして表示されるサンプルです。
</p>
</div><!-- /#content -->

<p id="page-top"><a href="#container">PAGE TOP</a></p>
</div><!-- /#container -->
</body>
</html>

《style.css》

@charset "UTF-8";

html, body, h1, h2, p, ul, li { 
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
  overflow: hidden;
}
a { text-decoration: none; }

body {
  background: #EEE;
  color: #333;
}
h1 {
  font-size: 1.5em;
  margin: 50px 0 20px 0;
  text-align: center;
}
h2 {
  margin-bottom: 20px;
}

#content {
  width: 680px;
  height: 2000px;
  margin: 0 auto 60px;
  padding: 60px;
  background: #FFF;
}

.nav {
  width: 760px;
  height: 50px;
  margin: 0 auto 20px;
  padding: 0 20px;
  font-size: 1.0em;
  border-radius: 5px;
  background: #333;
  background: -moz-linear-gradient(top, #666, #333);
  background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#333));
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
}
.nav li {
  float: left;
}
.nav li a {
  display: block;
  padding: 0 20px;
  color: #FFF;
  line-height: 50px;
}
.nav li a:hover {
  background: #666;
  
}

#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 0.874em;
}
#page-top a {
  display: block;
  width: 100px;
  padding: 30px 0;
  background: #666;
  color: #FFF;
  text-align: center;
  border-radius: 6px;
}
#page-top a:hover {
  background: #999;
}

下から上にアニメーションして表示される

$(function() {
  var topBtn = $( '#page-top' );
  topBtn.css( 'bottom', '-100px' );
  var showFlug = false;

  $(window).scroll( function () {
    if ( $(this).scrollTop() > 100 ) {
      if ( showFlug == false ) {
        showFlug = true;
        topBtn.stop().animate( {'bottom' : '20px'}, 200 ); 
      }
    } else {
      if (showFlug == true) {
        showFlug = false;
        topBtn.stop().animate( {'bottom' : '-100px'}, 200 ); 
      }
    }
  });

  topBtn.on( 'click', function () {
    $( 'body, html' ).animate( { scrollTop: 0 }, 500);
    return false;
  });
});