【JQuery】 ボタンを押したら、指定の場所にスクロール

jQueryのoffset() で表示位置の取得と移動

offset()では、ドキュメントの左上の起点と、指定要素の左上の距離を取得します。

要するに、指定要素の場所を特定できる。

span はどこにあるとoffsetで聞いたら

Object {top: 150, left: 50}

と場所の位置を取得できる。
その場所にスクロールさせればいい。

参考

スクロールさせたい要素の場所を下記で定義しましょう

var position = $("任意の要素").offset().top;

topにしているのは、topから閲覧してほしいからです。

ボタンを押したら、下にanimateでスクロール

場所を取得したら、animateで移動させます。

$("html,body").animate({
    scrollTop : position
}, {
    queue : false
});

これで指定した場所にスクロールされます。

Clickイベントで作動

ボタンを押したら作動させたいので、下記のようにclickイベントつける

$(任意のボタン).click(function(){
    $("html,body").animate({
        scrollTop : position
    }, {
        queue : false
    });
});

まとめ

これらの一連の処理をまとめると

// スクロールさせたい場所を定義
var position = $("任意の要素").offset().top;

// 指定のボタンを押したら、スクロールさせる。
$(任意のボタン).click(function(){
    $("html,body").animate({
        scrollTop : position
    }, {
        queue : false
    });
});

functionで使い回す

jQueryのfunctionは処理を定義すれば使い回しが可能。

例えば、下記のように使い回すことができる。

function sample(name, age) {
 
    console.log(name + 'さんの年齢は' + age + 'です！');
 
}
 
//引数に値を渡す
sample('太郎', 32);

このようにスクロールアニメーションもfunctionで定義して、引数を利用して使い回しましょう

完成（コピペで使い回せる）

$(function(){
      function ScrollButton(button, place){
        // スクロールさせたい場所を定義
        var position = $(place).offset().top;  
        // 指定のボタンを押したら、スクロールさせる。
        $(button).click(function(){
          $("html,body").animate({
              scrollTop : position
          }, {
              queue : false
          });
        });
      }

      // 使う場合、下記のようにする。ScrollButton(ボタン, スクロールさせたい場所)
      ScrollButton(".team-button", ".team");
    });
};