Faire défiler jusqu'à l'utilisation de la valeur d'attribut de données

Question

J'ai une barre de progression horizontale qui se dilate ou se contracte en fonction de la position de défilement. largeur de la barre de progression horizontale = position de défilement verticale du document.

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

Avec cela, je une fonction de signet qui ajoute un caret (élément) à la barre de progression (élément). Il est absolument positionné par rapport à la largeur de la barre de progression. Il peut y avoir plusieurs signets.

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

Ce que je voudrais faire est de construire une fonction scrollTo lorsque je clique sur chaque caret en utilisant la position gauche comme la variable scrollTo.

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

Merci.

Answer 1

Je travaille en ciblant par les données-titre

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

Le pourcentage de scrollTo besoins du travail.

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