javascriptでページトップへ実装の書き方

考え方

• オブジェクトの中に各メソッドを書く
• プロパティにjQueryオブジェクトやスクロール量を設定
• 初期化、エフェクト、イベントをメソッドで分ける
• settimeoutでスクロールイベントが終わったらボタンが表示される
• settimeoutでリサイズイベントが終わったらウィンドウ高さの値を取得
• initメソッドのプロパティの値でカスタマイズできるようにする(再利用性)

環境

• jQueryの記述あり
• ES6以前の書き方(thisとかvarとか)

書き方

javascript

var PageTop = {
  init: function(obj) {
    var self = this;
    self.targetElement = $('.PageTop');
    self.contentsHeight = $('html, body').height();
    self.windowHeight = $(window).height();
    self.scrollSpeed = obj.scrollSpeed;
    self.timerDisplay = obj.timerDisplay;
    self.setClickEvent();
    self.setScrollEvent();
  },
  animationPageToTop: function() {
    var self = this;
    $('html, body').animate({
      scrollTop: 0,
    }, self.scrollSpeed, 'swing');
  },
  animationHideBtn: function(obj) {
    var self = this;
    if (obj.Show) {
      self.targetElement.removeClass('Show');
      self.targetElement.addClass('Hide');
    }
  },
  animationShowBtn: function() {
    var self = this;
    self.targetElement.removeClass('Hide');
    self.targetElement.addClass('Show');
  },
  resizeEvent: function() { // windowリサイズしたときの高さ幅を取得
    var self = this;
    var timer = false; // リサイズ終了判定
    $(window).on('resize', function() {
      clearTimeout(timer);
      timer = setTimeout(function() { // リサイズが終わったら
        self.windowHeight = $(window).height();
        if (self.contentsHeight <= self.windowHeight) { // スクロールバーが非表示のときはページトップ画像を非表示
          if (self.targetElement.hasClass('Show')) { // .Hideのアニメーションの有効、無効を分岐
            self.animationHideBtn({ Show: true });
          } else {
            self.animationHideBtn({ Show: false });
          }
        }
      }, self.timerDisplay);
    });
  },
  setClickEvent: function() {
    var self = this;
    self.targetElement.find('a').on('click', function() {
      self.animationPageToTop(self.scrollSpeed);
    });
  },
  setScrollEvent: function() {
    var self = this;
    var timer = false;
    $(window).on('scroll', function() {
      clearTimeout(timer);
      timer = setTimeout(function() {
        self.resizeEvent();
        if (self.contentsHeight > self.windowHeight) { // ウィンドウ高さよりもコンテンツ高さ幅が短い場合は無効
          var scrollTop = $(window).scrollTop();
          // ウィンドウサイズの1/3以上スクロールしたらページトップ表示
          if (scrollTop > ($(window).height()) / 3) {
            self.animationShowBtn();
          // コンテンツの高さが短く、スクロール量が少ない場合の処理
          } else if (self.contentsHeight <= self.windowHeight + scrollTop) {
            self.animationShowBtn();
          // ページリロード時のページトップ画像のちらつきを解消
          } else {
            if (self.targetElement.hasClass('Show')) { // .ExHideのアニメーションの有効、無効を分岐
              self.animationHideBtn({ Show: true });
            } else {
              self.animationHideBtn({ Show: false });
            }
          }
        } else {
          return false;
        }
      },  self.timerDisplay);
    });
  }
};

PageTop.init({
  scrollSpeed: 500,
  timerDisplay: 300
});