Question

在我的网站上，我使用的是fancybox 2.1.5。当我打开图像并关闭它时，我会无意中返回到页面顶部。问题可以在以下最小例子中看到

<!DOCTYPE html>
<head>
    <style media="screen" type="text/css">
        body {
            height: 100%;
        }
        html {
            height: 100%;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css?v=2.1.5" media="screen" />
</head>
<body>
    <a href=#>
        <img src="http://placehold.it/1000x600">
    </a>
    <a class="fancybox" href="img/Gallery/500x600.gif">
        <img src="http://placehold.it/500x600">
    </a>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.fancybox.js?v=2.1.5"></script>
    <script>
        $(document).ready(function() {
            $('.fancybox').fancybox();
        });
    </script>
</body>
</html>

您会看到，如果您打开并关闭第二张图片，您会发现自己位于页面顶部。

如果我删除头部的初始样式

，似乎

<style media="screen" type="text/css">
    body {
        height: 100%;
    }
    html {
        height: 100%;
    }
</style>

问题消失了。如果我只删除体型或html样式，问题也会消失。为了使问题出现，身体和html高度必须达到100％

不幸的是，我不明白为什么会这样。有人可以解释一下吗？

注意：我已找到解决方案并解决此问题，但我想了解为什么会发生这种情况

Answer 1

您可以使用花式框的本机帮助程序来修复返回页面顶部的问题。

$('.fancybox').fancybox({
  padding: 0,
  helpers: {
    overlay: {
      locked: false
    }
  }
});

参考：http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/

防止fancybox返回页面顶部

1 个答案: