平滑滚动与花式框冲突 "Append Custom Content"

Question

我正在使用CSS技巧中的"平滑滚动"在我的一页（引导程序3）网站上导航。我也在使用幻想框来显示我的投资组合项目。

现在一切都很好，直到我尝试将fancybox中显示的数据与div（保存投资组合项目内容）中的数据相加

我认为这是冲突的，因为Jquery（Smoothscroll和Fancybox）都使用了锚标记。

这是平滑滚动脚本：

<script type="text/javascript">
    $(function() {
        $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 500);
                    return false;
                }
            }
        });
    });
</script>

这是加载fancybox并用类触发它的fancybox脚本，还有从单独的div获取内容的脚本。

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>

<!--FANCYBOX DISPLAY CONTENT FROM DIV -->
<script type="text/javascript">
    $(".fancybox").fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        afterLoad   : function() {
            this.inner.prepend( '<h1>1. My custom title</h1>' );
            this.content = '<h1>2. My custom title</h1>' + this.content.html();
        }
    });
</script>

当我评论出平滑滚动脚本时，fancybox运行良好。所以它必须是平滑滚动。

你知道如何解决这个问题吗？

你可以在这里看到fancybox正在工作的网站，因此平滑滚动被禁用：http://www.baasdesign.nl/responsive/

Answer 1

该类，例如"花式内容"，在加载fancybox链接之前隐藏花式内容，不要使其"display:none"，如下例所示：

/* element bifore load */ .fancy-content{ display: block; /*not none*/ height: 0px; overflow: hidden; visibility: hidden; } /*  element after load in fancybox inner */ .fancybox-inner .fancy-content{ height: auto; overflow: hidden; visibility: visible;}

其中一个原因是，滚动不知道滚动内容的宽度和高度，因为元素是display none。：-）我希望这能有所帮助！