Question

点击iframe中的任意位置，我希望我的父页面滚动到位于该iframe底部下方的位置。但无论我在这里为偏移设置多大的数字，父母只会滚动，直到iframe的底部与视口的底部对齐 - 没有更远。如何让它滚动到那之外呢？

$('#iframe1').click(function () {
    $('html,body', window.parent.document).animate({
        scrollTop: '+=' + 700 + 'px'
    }, 'fast');
});

Answer 1

从我的测试中，我测试的所有四种浏览器（Firefox，IE，Chrome和Safari）都可以找到以下作品：

主页：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Main Page</title>
</head>
<body>
  <iframe src="iframe.html" style="width:400px; height:500px;"></iframe>
    <div style="width: 200px;">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam,
      pharetra at aliquam sed, luctus vel augue. Donec nec hendrerit velit. Sed
      fermentum volutpat libero a viverra. Mauris gravida cursus pulvinar. Morbi lorem
      nunc, pretium ut sollicitudin vel, facilisis ac ligula. Vestibulum imperdiet
      luctus augue, id euismod diam posuere ut. Suspendisse commodo ante nec dui
      suscipit ullamcorper porta justo consequat. Sed et eleifend erat. Duis ornare,
      nisi id hendrerit commodo, mauris metus dapibus arcu, ac tempor arcu justo sed
      arcu. Sed elementum ornare dolor, ac malesuada est vulputate non. Etiam nisl
      sapien, vestibulum ut blandit sed, suscipit vel erat. Sed elementum orci vitae
      magna vulputate consequat at ac lorem. Aenean libero risus, ornare sed posuere
      vitae, molestie vitae elit.
    </p>
    <p>
      Nullam nec lorem id turpis iaculis pretium. Pellentesque quam libero, pulvinar
      vitae viverra at, tincidunt vel dui. Mauris libero nibh, posuere eget aliquet
      eget, fermentum nec mi. Cras at venenatis ipsum. Fusce sed fermentum ante. Nam
      varius quam in lectus dignissim consequat. Cras semper, ligula eu ullamcorper
      pulvinar, orci quam vulputate lorem, vel dignissim lectus ipsum a justo. Etiam
      nibh nisi, tristique sit amet adipiscing in, volutpat non dolor. Etiam eros mi,
      consectetur sed adipiscing ut, egestas vel mauris. Pellentesque habitant morbi
      tristique senectus et netus et malesuada fames ac turpis egestas. Donec lacus
      leo, feugiat ac lacinia ac, aliquam quis ante. In eleifend gravida lectus, vitae
      rhoncus erat sagittis quis. In in nibh at risus faucibus dignissim. 
    </p>
  </div>
</body>
</html>

iframe内容：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>iframe Page</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script type="text/javascript">
    /// wait till document ready
    $(function(){
      /// target the entire iframe page for a click
      $('body').click(function () {
          /// step back to the parent window and tell it to animate scroll
          $('html,body', window.parent.document).animate({
              scrollTop: '+=700px'
          }, 'fast');
      });
    })
  </script>
</head>
<body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam,
    pharetra at aliquam sed, luctus vel augue. Donec nec hendrerit velit. Sed
    fermentum volutpat libero a viverra. Mauris gravida cursus pulvinar. Morbi lorem
    nunc, pretium ut sollicitudin vel, facilisis ac ligula. Vestibulum imperdiet
    luctus augue, id euismod diam posuere ut. Suspendisse commodo ante nec dui
    suscipit ullamcorper porta justo consequat. Sed et eleifend erat. Duis ornare,
    nisi id hendrerit commodo, mauris metus dapibus arcu, ac tempor arcu justo sed
    arcu. Sed elementum ornare dolor, ac malesuada est vulputate non. Etiam nisl
    sapien, vestibulum ut blandit sed, suscipit vel erat. Sed elementum orci vitae
    magna vulputate consequat at ac lorem. Aenean libero risus, ornare sed posuere
    vitae, molestie vitae elit.
  </p>
</body>
</html>

有了上述内容，我没有遇到任何问题，因此我只能假设页面设置中存在导致问题的内容。我不确定你的代码是如何工作的，直接在iframe上放置一个'click'处理程序（这在我的任何测试中都不起作用）所以你可能有另一个点击功能正在被触发的其他地方，并没有像你期望的那样滚动页面？这可能是浮动或位置问题（关于你的iframe），但如果你说你可以手动滚动到正确的位置，那么我怀疑这将是一个原因。

Answer 2

我发现最简单的解决方案是修改你的iframe html以包含onload =“window.parent.parent.scrollTo（0,0）”，如下例所示：

<iframe src="https://myiframe.com" width="100%" height="1500px" onload="window.parent.parent.scrollTo(0,0)" />

点击iframe→父窗口滚动到位置？

2 个答案: