Question

我在开发网站上实现了fancybox2。

当我使用fancybox（点击链接等）时，整个html会在它后面移动 - 然后转到顶部。我在另一个演示中工作正常，但是当我将相同的代码拖到这个项目时，它会跳到顶部。不仅有链接到内联div，还有简单的图库。

有没有人经历过这个？

Answer 1

这实际上可以通过Fancybox 2中的帮助程序来完成。

$('.image').fancybox({
  helpers: {
    overlay: {
      locked: false
    }
  }
});

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

Answer 2

Jordanj77是正确的，但最简单的解决方案就是转到样式表jquery.fancybox.css并在overflow: hidden !important;部分.fancybox-lock中注明{{1}}行。

Answer 3

我意识到这是一个老问题，但我认为我找到了一个很好的解决方案。问题是花式框改变了主体的溢出值以隐藏浏览器滚动条。

正如Dave Kiss指出的那样，我们可以通过添加以下参数来阻止花哨的盒子：

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

但是，现在我们可以在查看我们精美的盒子窗口的同时滚动主页面。它比跳到页面顶部更好，但它可能不是我们真正想要的。

我们可以通过添加下一个参数来阻止正确的滚动：

    $('.image').fancybox({
      padding: 0,
      helpers: {
        overlay: {
          locked: false
        }
      },
    'beforeLoad': function(){
      disable_scroll();
        },
     'afterClose': function(){
       enable_scroll();
      }
    });

从galambalaz添加这些功能。请参阅：How to disable scrolling temporarily?

    var keys = [37, 38, 39, 40];

    function preventDefault(e) {
      e = e || window.event;
      if (e.preventDefault) e.preventDefault();
      e.returnValue = false;  
    }

    function keydown(e) {
        for (var i = keys.length; i--;) {
            if (e.keyCode === keys[i]) {
                preventDefault(e);
                return;
            }
        }
    }

    function wheel(e) {
      preventDefault(e);
    }

    function disable_scroll() {
      if (window.addEventListener) {
          window.addEventListener('DOMMouseScroll', wheel, false);
      }
      window.onmousewheel = document.onmousewheel = wheel;
      document.onkeydown = keydown;
    }

    function enable_scroll() {
        if (window.removeEventListener) {
            window.removeEventListener('DOMMouseScroll', wheel, false);
        }
        window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
    }

Answer 4

问题是fancyBox会更改正文的溢出值以隐藏浏览器滚动条。我找不到切换此行为的选项。

您可以删除fancyBox代码的此部分以防止它：

if (obj.locked) {
    this.el.addClass('fancybox-lock');

    if (this.margin !== false) {
        $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
    }
}

Answer 5

尽管如此，解决这个问题的正确方法是通过fancybox提供的选项（refer to this answer），CSS可用于解决问题。无需编辑库的css文件，只需将其添加到应用程序的主样式表中即可：

ren

代码重置元素的原始溢出。问题是html.fancybox-lock { overflow: visible !important; }隐藏了overflow: hidden;元素上的滚动条，导致页面跳转到＃34;到顶部。为了保留滚动条的位置，我们用<html>

覆盖溢出

Answer 6

这也有帮助

.fancybox-lock body {
    overflow: visible !important;
}

Answer 7

接受的答案并不完整，因为它实际上并没有解决它只是避免它的问题！这是一个更完整的答案，实际上在修复窗口跳转问题时为您提供了所需的功能：

        $('.fancybox').fancybox({
            helpers: {
                overlay: {
                    locked: false
                }
            },
            beforeShow:function(){ 
                $('html').css('overflowX', 'visible'); 
                $('body').css('overflowY', 'hidden'); 
            },
            afterClose:function(){ 
                $('html').css('overflowX', 'hidden');
                $('body').css('overflowY', 'visible'); 
            }
        });

Answer 8

也许这个答案很晚才有用，但也许它可以在将来有所帮助，如果在图片fancybox的陈词滥调/关闭后让你的网站滚动到顶部，你可以删除：

F.trigger('onReady');

或更好地使用：

/*F.trigger('onReady');*/

在fancyBox版本：1。1。5（2013年6月14日星期五），部分代码位于第897行。

Answer 9

如果您使用fancybox默认功能，您实际上可以这样编码：

    $(document).ready(function() {
        $(".fancybox").fancybox({
            padding: 0,
            helpers: {
                overlay: {
                  locked: false
                }
            }
        });
    });

Answer 10

我修复了：

overflow: hidden !important;

<{1}}中的.fancybox-lock正文中的

。并且滚动条没有跳跃：）

fancybox / fancybox导致页面跳转到顶部

10 个答案: