內部DIV滾動/向上滑動到他們居住的DIV的頂部

Question

我有一列div另一個中設置的元件div元件。 父或主div設置為特定的高度並且可以滾動。

調用函數時，基於要調用的內部div的ID，我希望內部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

滾動值相對於父 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 Transformation Animation on Transform以獲得最佳性能新答案： https ： //jsfiddle.net/t5f6e9k3/您應該查看https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor -only的屬性和管理的層計數

    .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

元素position屬性必須是絕對的，才能使其在其他元素上設置動畫。 嘗試這個

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