[jQuery] 目次を自動スクロールする方法

目次を自動スクロールってどうやれば良いんだろう。

前回実装したハイライト機能の実装。
一つ問題が
それは本文をスクロールして行った時、目次が見切れてしまうとハイライトが見えなくなってしまうこと。

See the Pen ハイライト機能 by YT (@YT-the-scripter) on CodePen.

なので本文と一緒に目次もスクロールされるようにしたい！
今回は自動スクロールの実装です。

※目次機能は下記でまとめてます。

目次を作ろう① 目次生成機能
目次を作ろう② ハイライト機能

自動スクロール実装方法

さて早速今回の実装結果は以下です。
スクロールをして目次が見切れる場所に来ると、自動で目次がスクロールされます。
(コードを確認したい場合、左上のタブをクリックしてください。)

See the Pen 自動スクロール by YT (@YT-the-scripter) on CodePen.

基本的な方針は以下です。

①目次の高さと、ハイライトされた部分の目次からの高さを取得する。
②目次の高さより、ハイライトされた部分の高さが大きければ、スクロールをする。

具体的なコードです。

　　　　const $activeLi = currentSection.link.parent("li");
      const outlineHeight = $outline.height();
      const outlineScrollTop = $outline.scrollTop();
      const activeLiOffset = $activeLi.position().top;

      const scrollPosition =
        outlineScrollTop + activeLiOffset;
 
      if (
        scrollPosition >　outlineHeight
      ) {
        $outline.scrollTop(
          $outline.prop("scrollHeight") - outlineHeight
        );
      }      

if (scrollPosition >　outlineHeight) {}
この部分で目次の大きさよりも、ハイライトされた部分が大きければ処理が動くという実装になっています。

 $outline.scrollTop(
          $outline.prop("scrollHeight") - outlineHeight
        );

scrollTopで指定した数値分自動スクロールをします。

これで自動スクロールの実装ができます。

まとめ

今回で目次の実装は完了です。
第一回目では、本文から目次を動的に実装する方法について。

あわせて読みたい

[jQuery] ブログページで目次を動的に作る実装 ブログページによく設置されている目次を作りたい。 ブログの目次とは、こちらの記事のサイドバーのような目次です。具体的な実装方針は、以下二つです。①本分から目次...

第二回目では、目次をハイライトする機能について。

あわせて読みたい

[jQuery] ブログページの目次にハイライト機能を実装する方法 スクロール位置に合わせて、目次がハイライトされる実装をしたい。 zennの目次のように、スクロール位置に合わせてサイドバーの目次のハイライト位置が変わる実装。http...

今回は目次を自動スクロールする方法についてまとめました。

この記事が誰かの役に立てば幸いです。

以下のXより質問などあれば受け付けているので、ご連絡ください。

Tweets by yuhi1321