jQueryでページの先頭にジャンプする機能を作る

jQueryでページ先頭にジャンプ

jQueryを使用すると簡単にジャンプの機能が実現できます。

  1. ページ先頭に戻るための仕様を以下のように決めます。
  2. 最初は上に戻る矢印は消しておく。
  3. ある程度スクロールしたら上に戻るための矢印を表示する。
  4. 矢印をクリックしたら一気に戻らないでスクロールしながら上に戻る。
  5. 上に戻ったら矢印を消す。

HTML、CSSjQueryのソース

 <!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryで先頭にジャンプ</title>
<style>
body {
  text-align: center;
}
#back-to-top {
  position: fixed;
  right: 5px;
  bottom: 20px;
}
#pos {
  position: fixed;
  right: 5px;
  bottom: 5px;
}
</style>
<script src="../js/jquery-2.2.4.min.js"></script>
</head>
<body>
<h1>jQueryでページ先頭にジャンプさせる</h1>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>
<p>先頭にジャンプ</p>

<div id="back-to-top"><a href="#"><img src="arrow_up100.png"></a></div>
<div id="pos"></div>

<script>
$(function(){
  // 上に戻る矢印(#back-to-top)は消しておく
  $('#back-to-top').hide();

 //スクロールが100を超えたら上矢印を表示、トップに戻ったら消す

  $(window).scroll(function(){
    $('#pos').text($(this).scrollTop());  //スクロール位置を表示
    if( $(this).scrollTop() > 100 ) {
      $('#back-to-top').fadeIn();  //矢印を表示
    } else {
      $('#back-to-top').fadeOut();  //矢印を消す
    }
  });

  //上矢印(#back-to-top)がクリックされたら上に戻る

  $('#back-to-top a').on('click',function(){
    $('body').animate({
      scrollTop: 0  //トップへ
    },500);  //0.5秒かけて戻る
    return false;
  });
});
</script>
</body>
</html>

 

テストの結果を確認

最初は非表示の矢印ボタンは101以上スクロールしたら表示されました。クリックしたらトップに戻りボタンが消えることを確認しました。

f:id:develog:20161015021402p:plain