Inner DIVs scrolling/sliding up to the top of the DIV they inhabit

Question

I have a column of div elements set within another div element. The parent or main div is set to a particular height and scrollable.

When I call a function, based on the ID of the inner div I call, I want the inner div to animate/scroll to the top of the main div .

Note, I don't want the div elements to change position - just to scroll up while staying in the original position.

JsFiddle HERE

Here's my code:

 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

the scroll value is relative to 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

Updated to CSS Transition Animation on Transform for Optimal Performance New Answer: https://jsfiddle.net/t5f6e9k3/ You should check out 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');
  }


}

Original answer: You are sliding the wrong element. If you are wanting a 'window' type of scroll effect that just scrolls content into the viewing container: 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);

or reset just to 0 https://jsfiddle.net/yo45601j/

function clicknext(id) {

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


}

Answer 3

The element position property must be absolute to animate it over the other elements. Try this

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