jQuery function with fancybox - I’m having refresh problem

Question

When opening or closing the fancybox (I’m a programmer php but beginner in Javascript with jquery), my page gives a refresh and goes back to the top of the content losing the focus of the place that the content was at fancybox. The action can be seen here (http://santins.com.br/_z/holcim) by clicking on any link that opens the fancybox and the code I’m using is this:

$(document).ready(function ($) {
    $('.fancybox').fancybox({
        closeClick: true,
        padding: 0,
        width: 800,
        height: 'auto',
        arrows: true,
        autoSize: false,
        nextClick: true,
            'ajax': {
            dataFilter: function (data) {
                return $(data).find('#primary')[0];
            }
        }
    });
});

Answer 1

I solved the problem with the following code:

$('.fancybox').fancybox({
  padding: 0,
  helpers: {
    overlay: {
      locked: false
    }
  }
});

Answer 2

Looking at your site, as there is a position reference using the address bar more specifically the area of hash of window.location what happens is that when you enter your fancybox it ends up eliminating the scrollbar, taking the value to 0.

A solution is at the time the person clicks, before displaying their fancybox, you store in a context variable the position of the scroll and when closing, you apply the navigation pro scroll that saved, taking the person back to the original position.

First let’s get the buttons that have fancybox and give a function to store the value of scrollTop when clicked:

window.lastScrollTop = $(window).scrollTop(); // Vai iniciar em zero;
// Quando clicar no fancybox vamos salvar um novo valor
$('a.fancybox').on('click', function () {
    window.lastScrollTop = $(window).scrollTop();
});

Now when you get out of fancybox has to return to the stored value, so in your settings, you have to add onClosed Handler.

$(document).ready(function ($) {
    $('.fancybox').fancybox({
        // ...
        onClosed: function () {
            // Ao fechar leva de volta a posição armazenada anterior do scrollTop
            $(window).scrollTop(window.lastScrollTop);
        },
        // ...
    });
});

I used a global variable lastScrollTop because I don’t know how your code was written and I don’t know how to isolate the context for this case. But I don’t recommend using global variables.

Another more generic way is also possible, instead of adding the click event to the anchors, is to use the onStart Handler fancybox, theoretically it is called before applying its effect that will eliminate the scrollTop, would look like this:

$(document).ready(function ($) {
    var lastScrollTop;
    $('.fancybox').fancybox({
        // ...
        onStart: function () {
            // Armazenando o scrollTop antes de iniciar o processo scrollTop
            lastScrollTop = $(window).scrollTop();
        },
        onClosed: function () {
            // Ao fechar leva de volta a posição armazenada anterior do scrollTop
            $(window).scrollTop(lastScrollTop);
        },
        // ...
    });
});

This way it is possible to use context variable without exposing any global variable.