1

I have a horizontal progress bar that expands or contracts based on the scroll position. horizontal progress bar width = vertical document scroll position.

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

With this I have a bookmark function that appends a caret (element) to the progress bar (element). It is absolutely positioned relative to the progress bar width. There can be multiple bookmarks.

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

What I would like to do is construct a scrollto function when I click on each caret using the left position as the scrollto variable.

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

Thank you.

Jabuka
  • 131
  • 14

1 Answers1

0

I have worked in out by targeting the data-title 

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

The scrollto percentage needs work.

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

Jabuka
  • 131
  • 14
  • 1
    Glad to see that you were able to find a solution. My only comment would be that you're accessing `data-title` incorrectly. If you're using the `data-` prefix, then you should try and use `$(this).data('title')` to get the value. Take a look at this answer for more info http://stackoverflow.com/questions/36438237/property-of-dom-element-different-depending-on-selector-jquery/36458025#36458025 – Kevin Apr 08 '16 at 23:39