打开 fancybox 后滚动到锚点

Question

我已经实现了一个 "help"-view in a fancybox。在这个花哨的盒子里，我有一个导航菜单。此菜单适用于锚 links。到目前为止一切顺利。

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

我也试过触发点击我的锚link:

$("#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

注意我从offset中减去35px（在var toScroll) 因为 fancybox 的 padding，但这是一个您可能需要使用的变量。

见JSFIDDLE

打开 fancybox 后滚动到锚点

Scroll to anchor after opening fancybox

javascript

anchor

jquery

fancybox

fancybox-2