Question

所以，这就是问题：我有一个很长的页面，中间有一个iframe。现在，如果在iframe中单击一个锚点，整个页面将滚动到iframe，这是我想要避免的。

以下是一个示例：http://jsfiddle.net/ymbV7/1/ 不要向下滚动页面，而是滚动iframe，直到看到“内容”菜单，然后尝试任何链接（例如“功能”）。

我需要外部页面不要滚动，而iframe必须正确滚动到点击的锚点。

有什么想法吗？

Answer 1

因此，当您点击描述链接详细信息的链接时，您是否想要移动到特定段落？

根据我的理解，你可以这样做。

<a href="#exactline">Click here</a>

而不是单击此处，您可以编写功能，就像我在http://jsfiddle.net/ymbV7/1/

中看到的那样

现在要链接到它应该移动的地方所有你需要做的是：

<h2><a name="exactline">Linking Directly from Features</a></h2>
<p>To override this behaviour, certain standard techniques can be used. In particular, you will need to create named anchors in the body of the text at the point where you want to link to.
</p>

＆＃34; exactline＆＃34;是给予para或引导你引用什么的链接名称。

它只滚动iframe而不是整个页面..

请参阅此链接以获取更多许可

http://www.thesitewizard.com/html-tutorial/link-to-specific-line-or-paragraph.shtml

我试过，它对我有用

Answer 2

尝试设置框架位置或散列的各种组合仍然不幸导致父卷轴。

所以这就是我最终要做的事情，因为iframe的内容位于同一个域中，因此没有导致框架DOM导致的跨站点问题。

我修改了父级中的链接，而不是执行target="myiframe"，我添加了一个o＆＃39;时钟函数来绕过默认实现（这似乎导致父级跳转到iframe）进行滚动

<a onclick="linkFunction(this, event);return false;"...

链接功能如下所示：

/// for scrolling iframe without jumping parent page
function linkFunction(atag, event) {
    event.preventDefault();
    var iframe = document.getElementById('myiframe');
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
    var name = atag.href.split('#')[1]; // get the hash
    var anchor = innerDoc.getElementsByName(name)[0]; // find the corresponding anchor tag
    // get position of the anchor relative to the current scroll position
    var offset = anchor.getBoundingClientRect().top
    // jump scroll the iframe content to the anchor
    iframe.contentWindow.scrollBy(0, offset)
}

没有JQuery，如果禁用javascript仍然可以正常工作（只是恢复到默认的父跳转）。

希望这有助于其他人。

Answer 3

尝试将您的内容放入如下表格中：

<table cellpadding=0 cellspacing=0 height="100%" width="100%">
  <tr>
    <td> 
      Header
    </td>
  </tr>

  <tr>
    <td>
      <iframe src="http://en.wikipedia.org/wiki/jQuery" height=600 width="90%"></iframe>
    </td>
  </tr>
  <tr>
    <td> 
      Footer
    </td>
  </tr>
</table>

请参阅http://www.webdeveloper.com/forum/showthread.php?t=212032

Answer 4

我认为如果你做<a target="name of iframe" href="#name of anchor">Click here</a>它会起作用，因为然后链接在iframe中打开，这可能是锚点使整个页面滚动到iframe的原因。希望我帮助并希望它有效！：）

Answer 5

也许这是Chrome中的一个错误，因为这个问题不会发生在最新的IE和Firefox中。

在iframe中单击锚点时，它会发生错误，浏览器会尝试将锚点对齐到窗口顶部。

我使用JavaScript（jQuery）解决了这个问题：

$('body').on('click', 'a', function(e) {
    if($(this).attr('href').startsWith('#')) {
        e.preventDefault();
    }
});

我希望它可以帮助你和...祝你好运！

Answer 6

是的，您必须观看链接并使用JQuery进行操作。

$(document).on('click', 'A[href^="#"]', function(){
    var hash = $(this).attr('href');
    var o = $(hash);
    if (o.length) {
        // move it
        $("html,body").stop().animate({ scrollTop: o.offset().top }, 300, 'swing');
        if (window.frameElement) {
            // it has parent window => stop bubbling (will not change document location)
            return false;
        }
    }
});

如何避免iframe中的锚点滚动父页面

6 个答案: