jQuery008 スクロールボタン

スクロールボタン

■考え方
とある酒屋さんのコンテンツを想定した場合
・画面をローディング時、「offsetメソッドで高さを取得」し変数へ入れる。
・クリックイベント時、animate({scrollTop: topOffset }で、取得した高さまで移動する。

※注意として、readyやloadで全て読み込み完了後でもうまく高さが取得できない(値の取得はできているが変数に異なる値がはいってしまう)ため、高さ指定(height)を明示的に指定する必要がある（ように見える）。

■コード
script.js

$(window).on('load',function(){

  //menuの表示・非表示のタイミング
  $('.mobile-menu').on('click touchstart',function(){
  if ( $('.mobile-menu-list').css('display')=='none'){
    $('.mobile-menu-list:not(:animated)').fadeIn('slow');
  } else {
    $('.mobile-menu-list:not(:animated)').fadeOut('slow');
  }
  });

  //初期準備
  var mobileMenuBtn = $('#mobile-menu');
  var mobileMenuListBtn = $('#mobile-menu-list');

  var topBtn =$('#top-btn');
  var sakeBtn =$('#sake-btn');
  var kuramotoBtn =$('#kuramoto-btn');
  var accessBtn =$('#access-btn');

  var topOffset = $('#top').get( 0 ).offsetTop;
  var sakeOffset = $('#sake').get( 0 ).offsetTop;
  var kuramotoOffset = $('#kuramoto').get( 0 ).offsetTop;
  var accessOffset = $('#access').get( 0 ).offsetTop;
  console.log('#topの取得位置：'+topOffset);
  console.log('#sakeの取得位置：'+sakeOffset);
  console.log('#kuramotoの取得位置：'+kuramotoOffset);
  console.log('#accessの取得位置：'+accessOffset);
  //.get( 0 ).offsetTop;
  //.offset().top;

  //トップへ戻るボタンの表示・非表示タイミング
  //mobileMenuBtn.hide();

  $(window).scroll(function () {
    if ($(this).scrollTop() > sakeOffset) {
      mobileMenuBtn.fadeIn();
    } else {
      mobileMenuBtn.fadeOut();
      mobileMenuListBtn.fadeOut();
    }
  });
  
  //スクロールしてトップへ移動。移動スピードと停止位置の調整。
  topBtn.click(function () {
    $('body,html').animate({scrollTop: topOffset }, 500);
    $('.mobile-menu-list').css('display','none');
    return false;
  });
  
  //.sakeコンテンツへ移動
  sakeBtn.click(function () {
    $('body,html').animate({scrollTop: sakeOffset}, 500);
    $('.mobile-menu-list').css('display','none');
    return false;
  });

  //.kuramotoコンテンツへ移動
  kuramotoBtn.click(function () {
    $('body,html').animate({scrollTop: kuramotoOffset}, 500);
    $('.mobile-menu-list').css('display','none');
    console.log('#kuramotoの移動位置：'+kuramotoOffset);
    return false;
  });
  
  //.accessコンテンツへ移動
  accessBtn.click(function () {
    $('body,html').animate({scrollTop: accessOffset}, 500);
    $('.mobile-menu-list').css('display','none');
    return false;
  });

});/*onload*/

■参考
http://www.webopixel.net/javascript/538.html