Question

我有一个Fancybox弹出窗口，但是在这个弹出窗口中，我有很多内容，我想在这个内容的顶部创建一些锚点，以“跳转”到弹出页面的特定部分。这是有效的，但是只要点击锚点，背景（Fancybox背后的主页面）就会跳下来。

这似乎是一个Fancybox错误，我无法解决它出于某种原因。我可以尝试任何解决方案吗？

我创建了一个快速JSFiddle here。如果单击“某个链接”链接，您将看到锚点正常工作，但背景页面也会跳转 - 这就是问题所在。

注意： 的

这似乎只是 Chrome 中的错误。

HTML：

<a class="fancyTrigger" href="#TheFancybox"></a>
<hr>
<div id="TheFancybox"></div>

Powered by <a href="http://fancybox.net/" target="_blank">Fancybox</a>

    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p><p>test</p><p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    v
    <p>test</p>
    <p>test</p>
      <p>test</p>
    <p>test</p>
    <p>test</p><p>test</p><p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    v
    <p>test</p>
    <p>test</p>

      <p>test</p>
    <p>test</p>
    <p>test</p><p>test</p><p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    v
    <p>test</p>
    <p>test</p>

    <p>test</p>

CSS：

/*  Note that the fancybox css file is loaded under the 
"Add Resources" tab to the left.  Normally you would load it in your <head> */

body {
   background-color: #eef;     
}
#TheFancybox {
    display: none;
    height:70px;
    overflow:scroll;
}

脚本

$("#TheFancybox").html("<p><a href='#test'>some link</a></p><p>dsdsds2dsds</p><p>dsdsdsd1sds</p><p>dsdsdsds3ds</p><p>dsds5dsdsds</p><p>dsdsds5dsds</p><p>dsd22dsdsds</p><p>dsdsdsd2222sds</p><p>dsds111dsdsds</p><p>dsdsdsdsds</p><p>dsdsdsaaaadsds</p><p>dd2d2d3dsdsds</p><p><a name='test'></a></p><p>dsdsdsd 2 da dad a dadsds</p><p>dsdsdsdsds</p>");

$(".fancyTrigger").fancybox();
$(".fancyTrigger").trigger('click');

Answer 1

最简单的选择是将autoCenter: true添加到您的选项中：

jQuery(document).ready(function ($) {
    $("#TheFancybox").html("...");
    $(".fancyTrigger").fancybox({
        autoCenter: true
    }).trigger('click');
}); // ready

还要确保将自定义脚本包装在.ready()方法

中

参见 JSFIDDLE

编辑：您还可以将帮助者locked设置为true，以便后台中的页面根本不会滚动

$(".fancyTrigger").fancybox({
    autoCenter: true,
    helpers: {
        locked: true
    }
}).trigger('click');

请参阅更新的 JSFIDDLE

页面锚点的Fancybox问题

1 个答案: