javascript - 打开 fancybox 后滚动到 anchor

Question

我在花式盒子中实现了“帮助” View 。在这个花哨的盒子里，我有一个导航菜单。此菜单适用于 anchor 链接。到目前为止一切顺利。

现在我想打开这个 fancybox 并直接滚动到一个特定的 anchor 。这是我的代码，我如何打开 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);

我还尝试触发我的 anchor 链接的点击:

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

是否有任何理由直接滚动到 fancybox 中的 anchor ？

Answer 1

您可能需要先找到目标 anchor 的 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