データ属性値を使用してスクロール

Question

スクロール位置に基づいて拡大または縮小する水平の進行状況バーがあります。水平進行バー幅=垂直ドキュメントスクロール位置。これにより

<div class="progress-bar" style="width:50%;"></div> 

私はプログレスバー（要素）にキャレット（要素）を追加ブックマーク機能を持っています。プログレスバーの幅に対して絶対的に配置されます。複数のブックマークが存在する可能性があります。

<div class="progress-bar" style="width:50%;"> 
    <div class="caret" style="left:50%;"></div> 
    <div class="caret" style="left:60%;"></div> 
</div> 

私がしたいのは、左の位置をscrollto変数として使用して各キャレットをクリックするとスクロール機能を構築することです。

はhttps://jsfiddle.net/jabuka/spevhqxv/

ありがとう参照してください。

Answer 1

Iは、データタイトル

<div class="progress-bar" style="width: 50%;"> 
    <div class="caret" style=" left:50%;" data-title="50"></div> 
    <div class="caret" style=" left:60%;" data-title="50"></div> 
</div> 

ニーズが働くscrolltoの割合を標的とすることでアウトに働いています。

$('body').on('click', '.caret', function() { 
    var scrollPerc = $(this).attr('data-title')/100; 
    var dh = $(document).height(); 
    var scrollAmount = Math.floor(dh * scrollPerc); 
    $('html,body').animate({ 
     scrollTop: scrollAmount 
    }, 600); 
}); 

JS Fiddle