当内容扩展到窗口之上时，将div保持在窗口顶部？

Question

var divPos;

$('div').click(function() {
  $(this).addClass('open');
  $('div').not(this).addClass('close');
  divPos = $(this).offset().top;
});

$('button').click(function(){
	$('div').removeClass('open close');
  $('html, body').animate({
    scrollTop: divPos
  }, 1000);
})

html, body {height:100%; padding:0; margin:0;}

div {height:25%; transition:height 1s;}
div.open {height:400px;}
div.close {height:0;}

div:nth-of-type(1) {background:red;}
div:nth-of-type(2) {background:blue;}
div:nth-of-type(3) {background:green;}
div:nth-of-type(4) {background:yellow;}

button { margin-bottom:100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<button>close</button>

我有一堆div，当用户点击一个时，它会扩展它的高度，而未点击的那个则获得零高度。所有高度都由css过渡。

单击关闭按钮时，所有div都会恢复原始大小。

如何让窗口滚动位置将之前打开的div保持在屏幕顶部，而其上方的div正在扩展？

我尝试将点击的div的位置设置为原始状态并使用：

  $('html, body').animate({
    scrollTop: divPos
  }, 500);

这基本上有效，但它不能保持css转换的时间，所以它在向上滚动到位之前向下移动。

以下是问题的模型：https://jsfiddle.net/0n6mxdt4/1/

随着div的降低，反弹变得越来越糟。

Answer 1

如果我正确理解你的问题，我认为这是你的答案。您需要在设置动画之前添加此行以定位：

$("html, body").scrollTop(divPos);

这是工作答案

var divPos;

$("div").click(function() {
  $(this).addClass("open");
  $("div")
    .not(this)
    .addClass("close");
  divPos = $(this).offset().top;
  clickedPos = $(this);
});

$("button").click(function() {
  $("div").removeClass("open close");
  $("html, body").scrollTop(divPos);
  $("html, body").animate({
      scrollTop: divPos
    },
    1000
  );
});

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

div {
  height: 25%;
  transition: height 1s;
}

div.open {
  height: 400px;
}

div.close {
  height: 0;
}

div:nth-of-type(1) {
  background: red;
}

div:nth-of-type(2) {
  background: blue;
}

div:nth-of-type(3) {
  background: green;
}

div:nth-of-type(4) {
  background: yellow;
}

button {
  margin-bottom: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<button>close</button>