滚动列表以在此视点的顶部设置此元素（单击）

Question

我有一份产品清单， 在此列表中，我有一些具有名称和描述（隐藏）的项目。

点击名称，我希望描述可见，并将此列表项设置为此视点的顶部。

我的问题是将列表项设置在顶部。

我正在尝试保存项目偏移并使用此滚动顶部。

这是我的代码：

var prod = jQuery('ul.products-conatiner > li');
var offsets = [];  
prod.each(function(){   
    var getAttribute = jQuery(this).attr('class');
    offsets[getAttribute] =  jQuery(this).offset().top - jQuery('.products-   conatiner').offset().top;
  });
  
  jQuery(".product-title").click(function() {
    var prod_id =jQuery(this).closest(".product-item");
    jQuery(this).closest(".product-item").toggleClass("open");
    jQuery(this).closest(".product-item").siblings(".product-item").removeClass("open");
    

    jQuery('.products-conatiner').stop().animate({
      scrollTop: offsets[prod_id] 
    }, 1000);
  
});

ul.products-conatiner {
    position: absolute;
    right: 0px;
    height: 100% !important;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

li.product-item {
    height: 200px;
}
.product-info{
display: none;
}

.open .product-info{
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="products-conatiner">
  <li class="product-item">
    <p class="product-title">item</p>
    <p class="product-info">
    Info
    </p>
  </li>
  <li class="product-item">
    <p class="product-title">item</p>
    <p class="product-info">
    Info
    </p>
  </li>
  <li class="product-item">
    <p class="product-title">item</p>
    <p class="product-info">
    Info
    </p>
  </li>
  <li class="product-item">
    <p class="product-title">item</p>
    <p class="product-info">
    Info
    </p>
  </li><li class="product-item">
    <p class="product-title">item</p>
    <p class="product-info">
    Info
    </p>
  </li><li class="product-item">
    <p class="product-title">item</p>
    <p class="product-info">
    Info
    </p>
  </li><li class="product-item">
    <p class="product-title">item</p>
    <p class="product-info">
    Info
    </p>
  </li>
</ul>