JavaScript：滚动iframe，直到带焦点的div出现在iframe的中心

我有一个可滚动的iframe。调用一个函数，该函数被传递一个div的ID和一个要关注的文本消息气泡。它可以工作，但当关注项目时，它总是出现在iframe的最顶端。因此，用户必须向上滚动一点才能看到用户正在回复的消息。我想让函数关注消息，但要让它显示在iframe的中心。我相信问题在于我试图使用

iframe.contentWindow.location.hash

与

iframe.contentWindow.ScrollTo0400

---

我很难想出解决这个问题的办法。我在想，也许可以得到问题项的y坐标，然后滚动到y坐标+iframe高度的一半。但我还没走运。这里有一个JSFIDLE可供使用：

这是一个在Firefox上工作的解决方案，我无法在Internet Explorer上测试：

我刚把你的scrollTo放在一个窗口中。setTimeout。在这种情况下，我肯定会在location.hash之后进行滚动

试一试

---

我猜出来了。基本上，我必须去掉iframe.contentWindow.location.hash，取而代之的是抓取气泡的y坐标，然后滚动到该位置减去iframe高度的一半。这是

关键部分是这个

var rect = elem.getBoundingClientRect();
//console.log(rect.top, rect.right, rect.bottom, rect.left);
iframe.contentWindow.scrollTo(0,rect.top-iframe.clientHeight / 2);

---

谢谢，但不是我想要的。这会将泡沫从对话中的位置移到另一个泡沫之上。我想让气泡留在原处，只是让iFrAMM滚动到它，使它出现在iFrAMP的中间，而不是在顶部。这对我来说仍然无效。我用的是最新版本的Chrome，你的小提琴不适合我。我的解决方案似乎仍然适用于所有浏览器。谢谢你。

    function goToMsg(id){
      var elem = iframe.contentWindow.document.getElementById(id);
      iframe.contentWindow.location.hash = id;
      $("html, body")
      .animate({scrollTop:$( elem ).offset().top}, 250, function() {        
        $(elem).fadeIn(200).fadeOut(200).fadeIn(200)
        .fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200)
        .fadeOut(200).fadeIn(200);
      })
    //iframe.contentWindow.scrollTo(100,100);
    }

var rect = elem.getBoundingClientRect();
//console.log(rect.top, rect.right, rect.bottom, rect.left);
iframe.contentWindow.scrollTo(0,rect.top-iframe.clientHeight / 2);