Внутренние DIV, прокручивающиеся / скользящие к вершине DIV, в которой они обитают

Question

У меня есть столбец с div элементами, установленными в другом элементе div.Родитель или основной div устанавливаются на определенную высоту и могут прокручиваться.

Когда я вызываю функцию, основываясь на идентификаторе внутреннего div, который я вызываю, я хочу, чтобы внутренний div анимировал / прокручивална вершину основной div.

Обратите внимание, я не хочу, чтобы элементы div меняли положение - просто прокручивали вверх, оставаясь в исходном положении.

JsFiddle ЗДЕСЬ

Вот мой код:

document.addEventListener('click', goStart);

function goStart(event) {
  // Call the function
  clicknext('3');
};

function clicknext(id) {
  jQuery('#subdiv-' + id).animate({
    scrollTop: (jQuery('#main-div').offset().top)
  }, 500);
}

.inner {
  height: 50px;
  width: 100px;
  background: #c0c0c0;
  color: white;
  margin-bottom: 20px;
}

#main-div {
  height: 100px;
  overflow-y: scroll;
  background: #EFEFEF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-div">

  <div class="inner" id="subdiv-1">
    DIV 1
  </div>

  <div class="inner" id="subdiv-2">
    DIV 2
  </div>

  <div class="inner" id="subdiv-3">
    DIV 3
  </div>

</div>

<input type="button" value="TRIGGER THE FUNCTION" id="triggerbutton">

Answer 1

значение прокрутки относительно parent offsetTop ('# main-div')

const TabInner = [
  (document.getElementById('subdiv-1').offsetTop - document.getElementById('main-div').offsetTop),
  (document.getElementById('subdiv-2').offsetTop - document.getElementById('main-div').offsetTop),
  (document.getElementById('subdiv-3').offsetTop - document.getElementById('main-div').offsetTop)
  ];

var Trigg_ref = 1;
triggerbutton.onclick = function()
{
  Trigg_ref = (Trigg_ref +1) % 3;
  clicknext(Trigg_ref);
};


function clicknext(id)
{
  jQuery('#main-div').animate({
    scrollTop: TabInner[id] 
  }, 500);
}

.inner {
  height:50px;
  width:100px;
  background: #c0c0c0;
  color:white;
  margin-bottom:20px;
}
#main-div {
  height:100px;
  overflow-y:scroll;
  background:#EFEFEF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-div">
  <div class="inner" id="subdiv-1">
    DIV 1
  </div>
  <div class="inner" id="subdiv-2">
    DIV 2
  </div>
  <div class="inner" id="subdiv-3">
    DIV 3
  </div>
</div>

<input type="button" value="TRIGGER THE FUNCTION" id="triggerbutton">

Answer 2

Обновлено для CSS анимации перехода при преобразовании для оптимальной производительности Новый ответ: https://jsfiddle.net/t5f6e9k3/ Вы должны проверить https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count

    .inner {
  height:100%;
  width:100%;
  background: #c0c0c0;
  color:white;
  position:absolute;
  top:0;
  left:0;
  transition: transform linear 300ms, opacity linear 300ms;
  }
#main-div {
 display:inline-block;
 width:100px;
 height:100px;
 overflow:hidden;
 background:#EFEFEF;
 position:relative;
}
.inner:not(.active) {
  transform: translate3d(0,100%,0);
}
    function clicknext(id) {
    var active = document.querySelectorAll('.inner.active');
  for(var i=0; i<active.length; i++){
    active[i].classList.remove('active');
    }
    var current = document.querySelector('#subdiv-'+id);
  if(!current.classList.contains('active')){
        current.classList.add('active');
  }


}

Оригинальный ответ: Вы скользите не по тому элементу. Если вам нужен эффект прокрутки типа «окно», который просто прокручивает содержимое в контейнер просмотра: https://jsfiddle.net/yo45601j/1/

  var main = jQuery('#main-div');
  var elm = jQuery('#subdiv-'+id);
  main.animate({
      scrollTop: (elm[0].offsetTop - main[0].offsetTop)
  },500);

или сбросить только на 0 https://jsfiddle.net/yo45601j/

function clicknext(id) {

  jQuery('#main-div').animate({
      scrollTop:0
  },500);


}

Answer 3

Свойство позиции элемента должно быть абсолютным, чтобы анимировать его над другими элементами.Попробуйте это

document.addEventListener('click', goStart);

function goStart(event) {
  // Call the function
  clicknext('3');
};

function clicknext(id) {
  jQuery('#subdiv-' + id).css("position","absolute").animate({
    top: 0
  }, 500);
}

.inner {
  height: 50px;
  width: 100px;
  background: #c0c0c0;
  color: white;
  margin-bottom: 20px;
}

#main-div {
  height: 100px;
  overflow-y: scroll;
  background: #EFEFEF;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-div">

  <div class="inner" id="subdiv-1">
    DIV 1
  </div>

  <div class="inner" id="subdiv-2">
    DIV 2
  </div>

  <div class="inner" id="subdiv-3">
    DIV 3
  </div>

</div>

<input type="button" value="TRIGGER THE FUNCTION" id="triggerbutton">