jQuery

jquery でpage scrollする処理

概要

左下にスクロール値を表示する
右下にトップへ戻る(↑)を表示する
↑を押下すると自動スクロールして、トップに戻る

基本の処理

スクロール値が60を超えたら、↑を表示させる
スクロール値が60以下になったら、↑を非表示にする

↑押下時の処理

↑を非表示にする

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <title>スクロール実験</title>
</head>
<body style="text-align:center;">
    <h1>スクロール実験</h1>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <p>hello!</p>
    <div id="back-to-top" style="position:fixed;right:5px;bottom:5px"><a href="#"></a></div>
    <!-- scroll position の数値のタグ -->
    <div id="pos" style="position:fixed;left:5px;bottom:5px"></div>

    <script>
    $(function() {
      // #back-to-topを消す
      $('#back-to-top').hide();

      // スクロールが十分されたら#back-to-topを表示、スクロールが戻ったら非表示
      $(window).scroll(function() {
          $('#pos').text($(this).scrollTop());
          if ($(this).scrollTop() > 60) {
              $('#back-to-top').fadeIn();
          } else {
              $('#back-to-top').fadeOut();
          }
      });

      // #back-to-topがクリックされたら上に戻る
      $('#back-to-top a').click(function() {
        console.log('here')
          $('body').animate({
              scrollTop:0
          }, 500);
      });
      return;
    });
    </script>



</body>
</html>

jqueryのコードのみを抜粋

scroll.js
    <script>
    $(function() {
      // #back-to-topを消す
      $('#back-to-top').hide();

      // スクロールが十分されたら#back-to-topを表示、スクロールが戻ったら非表示
      $(window).scroll(function() {
          $('#pos').text($(this).scrollTop());
          if ($(this).scrollTop() > 60) {
              $('#back-to-top').fadeIn();
          } else {
              $('#back-to-top').fadeOut();
          }
      });

      // #back-to-topがクリックされたら上に戻る
      $('#back-to-top a').click(function() {
        console.log('here')
          $('body').animate({
              scrollTop:0
          }, 500);
      });
      return;
    });
    </script>