javascript - 内部 DIV 滚动/向上滑动到它们所在的 DIV 的顶部

Question

我在另一个 div 元素中设置了一列 div 元素。父级或主 div 设置为特定高度且可滚动。

当我调用一个函数时，根据我调用的内部 div 的 ID，我希望内部 div 动画/滚动到主 div 的顶部.

请注意，我不希望 div 元素改变位置 - 只是在保持原始位置的同时向上滚动。

JsFiddle HERE

这是我的代码:

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