jQuery：スクロールするレイヤー内で指定位置までスクロールさせる

サンプルはこちら。

See the Pen nBidH by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

ページを開いた時点で「Caption 4」を表示するようにしており、上にあるリンクでそれぞれのCaptionに飛ぶようにしています。

通常のページ内リンクであれば<a href=”#id”>のような形で表現できますが、特定のスクロールレイヤーに対してそれはできません。そのためjQueryの「scrollTop()」関数を主に使い、「.scroll」レイヤー内でスクロールを実行させています。

HTMLはサンプルの画面を見てもらいまして、JSの解説は下記になります。

JavaScript

ページを表示した時点で「Caption 4」を表示させているコードは下記になります。

var pos = $("#c4").position();
$(".scroll").scrollTop(pos.top);

まず「.position()」関数を使い、親要素から相対的なCaption4(#c4)の位置を取得しています。
似たような関数に「.offset()」関数がありますが、こちらは親子関係を無視したページ全体から見た絶対座標を返します。

今回は「画面内でどこにあるか」という座標ではなく、「.scroll内のどこにあるか」を見る必要があるので「.position()」関数を使います。

そして2行目で「.scrollTop()」関数を使って「.scroll」内を取得した座標の高さぶんスクロールさせています。

※注意
「.position()」関数を使う場合、親要素にはCSSで position:relative、もしくはabsoluteかfixedがかかっている必要があります。

クリックして移動させる

次に画面上部の「c1」などをクリックした際に移動させているコードです。

$(".jump").click(function(){
  var target = "#" + $(this).html();
  var th = $(target).position();
  var sh = $(".scroll").scrollTop();
  var pos = th.top + sh;
  $(".scroll").animate({
    scrollTop: pos
  },"slow", "swing");
});

リンクにはそれぞれクラス「jump」が付与されており、それをクリックした際に実行されます。
2行目で、クリックしたリンクのテキスト自体をターゲットのIDとしてそのまま利用してしまいます。

3行目でそのターゲットの位置を格納します…が、ここが一番の注意です。

「.scrollTop()」関数は画面内に表示されている範囲の位置しか取得してくれません。実際やってみないとやや説明が難しいのですが、とにかくこれだけではズレてしまいます。そのため、4行目で「.scroll」が現在スクロールされている高さを取得しています。そして5行目でそれらを加算しています。

6行目は、最初のコードのように直接「.scrollTop()」関数で指定してもよいのですが、アニメーションでスクロールするように見せるため「.animate()」関数を使っています。