打开fancybox后滚动锚

Scroll to anchor after opening fancybox

本文关键字：滚动 fancybox 打开      更新时间：2023-09-26

我实现了一个"帮助"视图在一个花式框。在这个花哨的盒子里，我有一个导航菜单。此菜单适用于锚链接。到目前为止一切顺利。

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

有什么理由直接滚动到花式框中的锚点吗?

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

注意，我减去35px从偏移(在var toScroll)，因为fancybox的填充，但这是一个变量，你可能需要玩。

<<p>看到strong> JSFIDDLE
相关文章：