Search code examples
javascriptjqueryhtmlcssfancybox

Fancybox popup always scrolls on top


I have implemented the fancybox plugin in my website, but I noticed this issue:

Every time I click an image, it opens the image correctly, but it always scrolls on top of the website, and does'nt let me scroll down when the popup is opened. You can see this issue in my website here.

I tried using the option "scrollOutside", but it doesn't work.

Thank you very much for your help!


Solution

  • Before going to my solution, notice that the scrolling is not the fancybox issue itself. You can basically test it through browser console in all other pages:

    $.fancybox("test");
    

    In this webpage, you have several <div> as scrollable pages. Maybe you can scroll back to the right page. I writ the scroll back solution.

    First we need to save the page when you click it.

    var thisPage = "homepage";
    $(".page").click(function(){
        thisPage = $(this).attr("id");
    });
    

    Now you can scroll back to the page whenever you want. For instance onClosed:

    $("a.inline").fancybox({
        // ... other configurations ...
        'onClosed' : function() {
            $("html,body").scrollTop($("#"+thisPage).offset().top);
        }
    });
    

    Let me know if it didn't work.