スムーススクロールの実装

jQueryのanimate機能を使ってスムーススクロールを実装します。

scrollTop

「scrollTop()」を使用した場合、要素の最上部から縦スクロールした現在位置までのピクセル数を取得します。
{ scrollTop: 0 }であればtopから0ピクセルの位置で停止、{ scrollTop:100}であればtopから100pxの位置で停止します。

サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。

$(function() {
  $('#btn a').on('click', function () {
    $('html,body').animate({ scrollTop: 0 });
    });
});

「offset().top」と「scrollTop()」の違い

offset().topとは特定のHTML要素が配置されている座標を取得するのに使われるメソッドで、scrollTop()はスクロールした量を取得するメソッド

var Pos=$('#box').offset().top;
console.log(Pos);

タイミング

jQueryでのアニメーションタイミングは'linear' か、'swing' の２種類のみです。
linear = 常に同じ速度
swing = 始めゆっくり、途中が速め、最後はゆっくり（山なり）※デフォルト

停止位置100px、スピード300ミリ秒、タイミング「linear」の場合

$(function() {
  $('#btn a').on('click', function () {
    $('html,body').animate({ scrollTop: 100},300, 'linear');
    return false;
    });
});

複数の場所にスムーススクロールしたい場合

#がついている全てにスムーススクロールさせる場合

$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^="#"]').on('click',function() {
     // 移動先を取得
      var href= $(this).attr('href');
      var target = $(href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, 300, 'swing');
      return false;
   });
});

正規表現を加えた形

$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^="#"]').on('click',function() {
  
　　　 // 移動先を取得
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, 300, 'swing');
      return false;
   });
});

この部分ですが、

$(href == "#" || href == "" ? 'html' : href);

？は三項演算子と言い、if文を１行にまとめた形になります。

例：A ? B : C
条件Aの時はB、それ以外の時はCという形になります。

今回の形は

if(href == "#" || href == "") { 
   'html' 
} else {
   href
}

これと同じということになります。

は論理演算子のor なので、

日本語に直せば、「hrefの中の値が"#"または空のときは"html"、そうでないときはhref」です。

位置の取得

position()は、親要素から見た座標を取得します。 offset()は、親要素関係なく、documentから見た座標を取得します。
さらに複数回使う要素は変数に置き換えた方が効率的なので記述するパターンも覚えておきましょう。

以下はターゲット要素より、50px上にスクロールするサンプルです。
var position = target.offset().top - 50;

通常であれば以上の記述で良いのですが、以上の記述では「#」がついているアンカーポイントには全てスムーススクロールでリンクされてしまいます。

特定のリンクだけスムーススクロールの対象にする場合

$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a.scroll[href^="#"]').on('click',function() {
     // 移動先を取得
      var href= $(this).attr('href');
      var target = $(href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, 300, 'swing');
      return false;
   });
});

スクロールイベントの追加

場合によってはある程度スクロールしてから表示させたい場合もあります。
その場合、まず「.hide」で見せなくさせて、ある条件（今回の場合は何pxスクロールしたら）になったら、
「.fadeIn」で表示させ、ある条件以外の時は「.fadeOut」で非表示にさせましょう。

ある程度スクロールしたらボタンを表示させる

    $('#to_top').hide();
    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#to_top').fadeIn();
        } else {
            $('#to_top').fadeOut();
        }
    });