Горизонтальная анимированная прокрутка до div по щелчку

Question

Итак, мне нужно сделать горизонтальный аккордеонный скроллер, который центрирует открытый div. код ниже, помогут вам ребята понимают:

<div class="wrapper"> 
    <div class="product"> 
     <div class="product-title"> 
      <img src="http://goo.gl/PUr1TP"> 
     </div> 
     <div class="product-all"> 
      <div style="width: 200px; background: red;" >1</div> 
      <div style="width: 100px; background: yellow;">2</div> 
      <div style="width: 400px; background: pink;" >3</div> 
      <div style="width: 270px; background: blue;" >4</div> 
      <div style="width: 500px; background: aqua;" >5</div> 
      <div style="width: 100px; background: green;" >6</div> 
     </div> 
    </div> 
    <div class="product"> 
     <div class="product-title"> 
      <img src="https://goo.gl/hRJ3Dz"> 
     </div> 
     <div class="product-all"> 
      <div style="width: 200px; background: red;" >1</div> 
      <div style="width: 100px; background: yellow;">2</div> 
      <div style="width: 400px; background: pink;" >3</div> 
      <div style="width: 270px; background: blue;" >4</div> 
      <div style="width: 500px; background: aqua;" >5</div> 
      <div style="width: 100px; background: green;" >6</div> 
     </div> 
    </div> 
    <div class="product"> 
     <div class="product-title"> 
      <img src="https://goo.gl/vX3Aih"> 
     </div> 
     <div class="product-all"> 
      <div style="width: 200px; background: red;" >1</div> 
      <div style="width: 100px; background: yellow;">2</div> 
      <div style="width: 400px; background: pink;" >3</div> 
      <div style="width: 270px; background: blue;" >4</div> 
      <div style="width: 500px; background: aqua;" >5</div> 
      <div style="width: 100px; background: green;" >6</div> 
     </div> 
    </div> 
    <div class="product"> 
     <div class="product-title"> 
      <img src="http://goo.gl/rXt3kE"> 
     </div> 
     <div class="product-all"> 
      <div style="width: 200px; background: red;" >1</div> 
      <div style="width: 100px; background: yellow;">2</div> 
      <div style="width: 400px; background: pink;" >3</div> 
      <div style="width: 270px; background: blue;" >4</div> 
      <div style="width: 500px; background: aqua;" >5</div> 
      <div style="width: 100px; background: green;" >6</div> 
     </div> 
    </div> 
</div> 

body, html { 
    max-width: 100%; 
    max-height: 100%; 
    margin: 0; 
    padding: 0; 
    background: #ccc; 
} 

html { 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

*, *:before, *:after { 
    -webkit-box-sizing: inherit; 
     -moz-box-sizing: inherit; 
      box-sizing: inherit; 
} 

.wrapper { 
    height: 300px; 
    width: 100%; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 
    margin: 200px 0 0 0; 
} 

.product, .product-title, .product-all, .product-all div { 
    display: inline-block; 
    height: 100%; 
    vertical-align: top; 
} 

.product-title img { 
    height: 100%; 
} 

.product { 
    position: relative; 
} 

.button { 
    float: right; 
    padding: 5px 10px; 
    border: 2px solid green; 
    cursor: pointer; 
} 

$(document).ready(function() {  
    $(".product-all").hide(100); 
    $(".product-title").click(function() { 
     $(".product-all").hide(500); 
     $(this).parent().children(".product-all").show(500); 

     var scrollTo = $(this).parent().children(".product-title").position().left; 
     $('.wrapper').animate({ 
      'scrollLeft': scrollTo 
     }, 800); 
    }); 
}); 

Выше код, который я пытался, но прокруткой, кажется, идут в крайнее левое положение моего контейнера, не ставит «активное» div в левом углу. Есть идеи, как это исправить? Благодаря!

Вот fiddle

Answer 1

я заметил вашу проблему и найти решение.

У вас не было правильного прокрутки. Вы пытаетесь получить позицию всех детей (с классом product-title), но вам нужна позиция выбранного ребенка.

var scrollTo = $(this).parent().position().left; 

http://fiddle.jshell.net/jxv7641y/1/

Answer 2

Таким образом, я понял это!

$(document).ready(function() { 

$(".product-all").hide(100); 
$(".product-title").click(function() { 

    $(".product-all").hide(500); 
    $(this).parent().children(".product-all").show(500); 

    //get the index of .product just clicked 
    var i = 0; 
    var piu = $(this).parent().index(); 
//.wrapper 
    var wrapper = $(this).parent().parent(); 
    var scroll_shit = 0; 

    while (i < piu) { 
    //get width of each .product-title, because the sum of all the previous .product-titles is the needed position 
    product = wrapper.children().eq(i); 
     scroll_shit = scroll_shit + product.children(".product-title").width(); 
     i++; 
    } 

    $('.wrapper').animate({ 
    'scrollLeft': scroll_shit 
    }, 800); 
}); 

});