CSSでoverflow: autoやoverflow: scrollを指定している要素内で、アンカーリンクから指定した場所にスクロールするアニメーションを実装するtipsです。

スクロールするレイヤー内でアンカーリンクを設置して指定位置までスクロールさせる

補足として、CSSでoverflow: autoしている要素にはposition: relativeを指定します。

html

<ul class="list">
  <li><a class="js-btn" href="#sectio01">01</a></li>
  <li><a class="js-btn" href="#sectio02">02</a></li>
</ul>
<div class="box">
  <section class="section" id="sectio01">
    <h2>title01</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
  </section>
  <section class="section" id="sectio02">
    <h2>title02</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
  </section>
</div>

javascript

var scrollAnim = function () {
  var target,
      targetP,
      scrollP,
      position;
  $('.js-btn').on('click', function (e) {
    e.preventDefault();

    target = $(this).attr('href');
    targetP = $(target).position();
    scrollH = $('.box').scrollTop();
    position = targetP.top + scrollH;

    $('.box').animate({
      scrollTop: position
    }, 400);
  });
};
scrollAnim();

詳細を解説

リンクをクリックしたとき

$('.js-btn').on('click', function (e) {

リンクをクリックしたときの挙動を無効化

e.preventDefault();

リンクのhref属性からスクロール先を取得

target = $(this).attr('href');

スクロール先の親ボックスからの相対的な位置を取得

親ボックスにはpositionプロパティを指定しておく必要があります。

targetP = $(target).position();

現在のボックス内のスクロール量を取得

scrollH = $('.box').scrollTop();

スクロール先の親ボックスからの相対的な位置と、現在のスクロール量を足す

position = targetP.top + scrollH;

スクロールさせる

$('.box').animate({
  scrollTop: position
}, 400);

注意すること

注意点としては、position()はボックス内の見えている範囲内での値を返すので、現在のボックス内のスクロール量を足してあげないと目的のスクロール先へアニメーションさせることができません。

demo

おわります。