Question

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

当我调用一个函数时，基于要调用的内部div的ID，我希望内部div设置动画/滚动到主要div的顶部。

请注意，我不希望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); }元素更改位置-只是在保持原始位置的同时向上滚动即可。

JsFiddle HERE

这是我的代码：

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

prediction

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过渡动画 新答案：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">

内部DIV滚动/向上滑动到他们居住的DIV的顶部

3 个答案: