3

Ao abrir ou fechar a fancybox (sou programador php mas iniciante em Javascript com jquery), a minha página dá um refresh e volta para o topo do conteúdo perdendo o foco do lugar que o conteúdo se encontrava ao acionar a fancybox. A ação pode ser vista aqui (http://santins.com.br/_z/holcim) clicando em qualquer link que abre a fancybox e o código que estou usando é este:

$(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];
            }
        }
    });
});

2 Respostas 2

2

Olhando o seu site, como não há uma referencia de posição utilizando a barra de endereço mais especificamente a área de hash do window.location o que acontece é que quando você entra no seu fancybox ele acaba por eliminar o scrollbar, levando o valor para 0.

Uma solução é na hora em que a pessoa clicar, antes de exibir seu fancybox, você armazenar em uma variável de contexto a posição do scroll e ao fechar, você aplicar a navegação pro scroll que salvou, levando a pessoa de volta a posição original.

Primeiro vamos pegar os botões que tem fancybox e dar uma função para armazenar o valor do scrollTop quando clicado:

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();
});

Agora quando você sair do fancybox tem que retornar ao valor armazenado, então nas sua configurações, tem que adicionar 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);
        },
        // ...
    });
});

Utilizei uma variável global lastScrollTop pois não sei como seu código foi escrito e não sei como isolar o contexto pra este caso. Mas não recomendo o uso de variáveis globais.

Outra maneira mais genérica também é possível, no lugar de adicionar o evento de click nas ancoras, é utilizar o onStart handler do fancybox, teoricamente é chamado antes de aplicar seu efeito que vai eliminar o scrollTop, ficaria assim:

$(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);
        },
        // ...
    });
});

Desta maneira é possível utilizar variável de contexto não expondo nenhuma variável global.

4
  • 1
    Poderia me ajudar a fazer isso Gabriel? Commented 17/02/2014 às 12:47
  • Está ai uma solução que deve ajudar-lhe @marcosvinicius Commented 17/02/2014 às 13:05
  • Desculpe minha ignorância em não saber se devo colocar alguma coisa nesses 3 pontinhos (...) ... Commented 17/02/2014 às 13:51
  • os três pontinhos é só pra exemplificar que esse trecho de código fica entre o seu código, pode ficar antes ou depois. Tenta colocar depois do autoSize e antes do nextClick sem incluir os ... claro, pois são propriedades de um objeto literal que você está passando como parâmetro do método fancybox. Commented 17/02/2014 às 16:24
2

Eu resolvi o problema com o seguinte código:

$('.fancybox').fancybox({
  padding: 0,
  helpers: {
    overlay: {
      locked: false
    }
  }
});
1
  • também funciona Commented 1/04/2014 às 14:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .