pagetop.js

// トップに戻るボタン
// ブラウザによってルートが変わるため`$('html, body')`で2つ取得する。
// `$(window).scrollTop()`でクリック時点でのスクロール量を取得する。
// `duration: 1000`でアニメーションにかかる時間を示定する（この場合は1秒）。
$(function() {
  var $root = $('html, body');
  var $btn = $('#pageTop');

  $btn.click(function() {
    var scroll = $(window).scrollTop();
    $root.animate({
      scrollTop: 0
    },
    {
      duration: 1000,
      easing: 'swing'
    });
  });
});

// スクロールするとあらわれるボタン
// `$(window).height()`でウィンドウサイズの高さを取得。
// `$(window).scroll(function()`でスクロールしたら処理を開始。
// `$(window).scrollTop()`でスクロール量を測定。
$(function() {
  var $height = $(window).height();
  var $displayHeight = ($height / 4);
  $(window).scroll(function() {
    var $btn = $('#pageTop');
    var scroll = $(window).scrollTop();

    if(scroll > $displayHeight) {
      $btn.addClass('is-active');
    } else {
      $btn.removeClass('is-active');
    }
  });
});