How to get the jquery slider to slide automatically to the element the user clicked?

Question

I have a slider made with jquery ui and it works perfectly when dragged by the user or if the user click on it, it slides perfectly and slides the content in the div with it. What I want now and haven't been able to make is to allow the user to click any element inside the div that scrolls and have the slider scroll there automatically.

Heres my code:

<div id="content-scroll">
  <div id="content-holder">
    <div class="content-item">
      <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p>
    </div>
    <div class="content-item">
      <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p>
    </div>
    <div class="content-item">
      <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p>
    </div>
    <div class="content-item">
      <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p>
    </div>
    <div class="content-item">
      <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p>
    </div>
  </div>
</div>
<div id="content-slider"></div>

and the js:

$(function(){
  $("#content-slider").slider({
    animate: true,
    change: handleSliderChange,
    slide: handleSliderSlide
  });
});

function handleSliderChange(e, ui)
{
  var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
  $("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide(e, ui)
{
  var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
  $("#content-scroll").attr({scrollLeft: ui.value * (maxScroll / 100) });
}

basically what I want (just to make clear) is that when any "p" is clicked the slider moves it to the beginning of the div and slides itself. (that "p" element will be an "img" in some cases).