我真的很感激任何帮助。
我有一个两部分并排的flex容器。
右侧的部分有一列，其中包含宽度为100%的图像。
我想在单击右栏中的一个图像时隐藏左部分，并动态地将右部分拉伸到窗口的全宽。
同时，我想将刚才单击的图像滚动到窗口顶部。
我尝试了scrollintoview和animate（{scrolltop:。。。但是我经常遇到图像不能一直滚动到顶部的问题。我怀疑这是因为flex box和不断变化的图像高度/宽度。我真的不想更改图像的大小。我看到的解决方案是在左栏被隐藏后更新视口中的图像位置，然后滚动到顶部
我想问题是我不太明白为什么图像现在不能滚动到顶部。
我现在拥有的是

$(document).ready(function(){
$('#current').on('click', function(){
$( "#left" ).toggle( "fast" );document.querySelector('div#current').scrollIntoView({behavior: "smooth", block: "start", inline: "start"});
});

});

body {
  display: flex;
}
section {
  background: red;
  width: 600px;
  margin-left: 20px;
  width: 100%;
}

img {
  width: 100%;
}

div#current {
  background: yellow;
}

div {
  background: green;
  width: 90%;
  margin: 20px;
  padding: 20px;
}
<section id="left">
</section>
<section id="right">
  <div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
    </div>
   <div id="current">
     click me
      <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
    </div>
   <div>
      <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"/>
    </div>
</section>

这里是代码笔
https://codepen.io/malykh_kate/full/vymkzpb
非常感谢你！