jquery - ページがBootstrapのノブセクションにスクロールされると、Jqueryノブがアニメーション化されます

Question

運がないのにたくさん検索した後。こちらに投稿することにしました。

jquery ノブを使用してグラフを表示しています。また、アニメーションを作成したいのですが、アニメーションが完成し、うまく機能しています。しかし、jquery スムーズ スクロール プラグインを使用して、ページ スクロールでアニメーション化したいと考えています。例: チャートのメニュー項目をクリックすると、今度はページがチャート セクションにスクロールされ、ノブをアニメートしたいとします。

また、代替案がある場合は、私に提案してください。

前もって感謝します

HTML コード

<input type="text" class="dial" value="90" >

Jquery コード

$('.dial').each(function () { 
    var elm   = $(this);
    var color = elm.attr("data-fgColor");
    var perc  = elm.attr("value");

    elm.knob({ 
      "value"        : 0,
      "min"          : 0,
      "max"          : 100,
      "width"        : 200,
      "height"       : 200,
      "bgColor"      : "#edf1ea",
      "fgColor"      : "#82b854",
      "skin"         : "tron",
      "readOnly"     : true,
      "thickness"    : .2,
      "linecap"      : "round",
      "dynamicDraw"  : true,
      "displayInput" : false
    });

    $({value: 0}).animate({ value: perc }, {
      duration : 1000,
      easing   : 'swing',
      progress : function () {
        elm.val(Math.ceil(this.value)).trigger('change')
      }
    });
});