Question

我在fancybox中实现了“帮助”视图。在这个fancybox我有一个导航菜单。这个menue使用锚链接。到目前为止一切都很好。

现在我想打开这个fancybox并直接滚动到一个特殊的锚点。在这里我的代码，我如何打开fancybox：

    $.fancybox({
       width       : 1000,
       height      : 800,
       minHeight   : 800,
       maxHeight   : 800,               
       minWidth    : 1000,
       maxWidth    : 1000,
       fitToView   : false,
       autoSize    : true,
       closeClick  : false,
       openEffect  : 'none',
       closeEffect : 'none',
       scrolling   : 'yes',
       href        : "#idofview",
   })

我尝试了一些东西，但没有任何作用。我试过了：

location.href = "#anchor";
//or
location.hash = "#anchor";
//or
afterShow: function() {
    $(this).closest('.fancybox-inner').animate({
            scrollTop: $('.fancybox-overlay').scrollTop() + $("#anchorid").offset().top
        });
//or
$(document.body).scrollTop($('#anchorid').offset().top);

我还试图触发我的锚点链接：

$("#btn_link").trigger('click');

有没有理由直接滚动到fancybox中的锚点？

Answer 1

您可能需要先找到目标锚点的offset().top，然后只需将.fancybox-inner选择器设置为该位置的动画（您根本不需要此$(this).closest()方法）所以：

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        // API options
        afterShow: function () {
            var toScroll = $(".fancybox-inner").find("#anchor2").offset().top - 35;
            $(".fancybox-inner").animate({
                scrollTop: toScroll
            }, 1000);
        }
    }); // fancybox
}); // ready

注意我从偏移（var toScroll）中减去 35px 因为fancybox的 padding ，但这是您可能需要使用的变量。

参见 JSFIDDLE

打开fancybox后滚动到锚点

1 个答案: