Scrollen zur Verwendung des Datenattributwerts

Question

Ich habe eine horizontale Fortschrittsleiste, die basierend auf der Bildlaufposition erweitert oder verkleinert wird. horizontale Fortschrittsbalkenbreite = vertikale Scrollposition des Dokuments.

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

Damit habe ich eine Lesezeichen-Funktion, die ein Caret (Element) auf den Fortschrittsbalken anhängt (Element). Es ist absolut relativ zur Fortschrittsbalkenbreite positioniert. Es kann mehrere Lesezeichen geben.

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

Was würde ich tun möchte, ist eine scrollTo Funktion zu konstruieren, wenn ich auf jedem caret klicken Sie auf die linke Position als scrollTo Variable.

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

Danke.

Answer 1

Ich habe in ausgearbeitet, indem die Daten-Titel Targeting

<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> 

Der scrollTo Prozentsatz muss arbeiten.

$('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