Como Criar o “Efeito Deslizante” no OptimizePress (Smooth Scrolling)

0 Flares Twitter 0 Facebook 0 Pin It Share 0 Google+ 0 LinkedIn 0 Filament.io 0 Flares ×

Sabe aquele efeito de deslizar a página quando clicar em algum elemento? Esse efeito se chama Smooth Scrolling, e você vai aprender como incrementar suas páginas rapidamente com esse efeito nesse post!

 

1º Passo: Âncorar seus Elementos ou Linhas

Você quer que a pessoa clique no botão rolar a página, ou qualquer outro elemento e seja “redirecionada” para um local específico de sua página, para isso precisa primeiro âncorar esse elemento ou linha.

No Menu é a mesma coisa, se você quiser que quando clicar nos links do seu menu a pessoa seja redirecionada para um local da página, basta fazer a ancoragem nos links do menu.

No link você deve colocar assim:

 

E para que aconteça o redirecionamento, você deverá colocar esse código dentro da linha, como você pode ver no print abaixo:

<div id=”cadastro”></div>

smoothscrolling

 

 

2º Passo: Colocar um código para mostrar a página enquanto desliza

Fazendo apenas o 1º Passo, já irá funcionar a questão de redirecionar, mas irá acontecer de forma bruta, indo direto para o local sem mostrar a página.

Mas basta colocar esse código, como mostro no print abaixo e sua página terá o efeito deslizante:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>
<script>
$(function() {
$(‘a[href*=#]:not([href=#])’).click(function() {
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) {
var target = $(this.hash); target = target.length ? target : $(‘[name=’ + this.hash.slice(1) +’]’);
if (target.length) {
$(‘html,body’).animate({ scrollTop: target.offset().top }, 1000);
return false;
} } }); });
</script>

smoothscrolling-png2-png

** Esse código deve ser colocado em Page Settings > Other Scripts, na opção Header.

***Caso você tenha problemas ao copiar o código, segue um print do código para que você confira:

codigosmooth

 

Bom, é isso! Se você gostou deixe o seu like, compartilha com os amigos e deixe seu comentário!

E se você quer aprender mais de OptimizePress, conheça o Curso OptimizePress na Prática!

 

Grande abraço,

Camila

 

 

0 Flares Twitter 0 Facebook 0 Pin It Share 0 Google+ 0 LinkedIn 0 Filament.io 0 Flares ×

Sobre o autor 

Empreendedora (ou aventureira) online há 4 anos, iniciei com e-commerce, hoje trabalho com Marketing Digital e me apaixonei pelo Optimizepress desde quando comecei a quebrar a cabeça com ele!

About The Author

Camila Schneider

Empreendedora (ou aventureira) online há 4 anos, iniciei com e-commerce, hoje trabalho com Marketing Digital e me apaixonei pelo Optimizepress desde quando comecei a quebrar a cabeça com ele!

6 Comentários

  • Luísa

    Responder Responder 10 de janeiro de 2017

    Não funcionou! Depois que coloco o código o site não atualiza.

    • Camila Schneider

      Responder Responder 5 de fevereiro de 2017

      Oi Luísa, td bem? Eu uso e continua normal… Porém, eu uso o OptimizePress como tema e nunca uso plugins adicionais. Se você tiver plugins instalados que sejam incompatíveis poder acontecer de não funcionar.
      Abraços, Camila

  • André Amaral

    Responder Responder 9 de fevereiro de 2017

    Oi Camila, tudo bem?

    Obrigado por ter me ajudado com varias dicas, realmente me ajudou muito.
    Tentei fazer esse efeito, mas também não funcionou.
    Pesquisando um pouco mais, consegui resolver da seguinte forma:

    Add esse código abaixo no Footer, ai o efeito funcionou perfeitamente.

    Obrigado!

    opjq(function($) {
    $(‘a[href*=”#”]:not([href=”#”])’).click(function() {
    if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $(‘[name=’ + this.hash.slice(1) +’]’);
    if (target.length) {
    $(‘html,body’).animate({
    scrollTop: target.offset().top
    }, 1000);
    return false;
    }
    }
    });
    });

    • Camila Schneider

      Responder Responder 20 de fevereiro de 2017

      Oi André! Mas que bom que deu certo e vc apresentou uma nova solução! Fico muito agradecida!
      Grande abraço, Camila

  • pierre

    Responder Responder 30 de março de 2017

    oi não funciona mesmo…. tenho o curso mas n ensina isso :( muito bom por sinal…
    mas essa dica n rolou

    além disso o optimizepress está diferente para mim algumas funções…. não sei se mudou tanto assim….

    • Camila Schneider

      Responder Responder 5 de abril de 2017

      Oi Pierre, td bem? Eu uso isso praticamente todos os dias e tem funcionado exatamente como no post… Uma coisa que é sempre necessário se atentar é em relação aos plugins que você tenha no site que impossibilitam mesmo certas funções e também as atualizações do Op que devem sempre estar em dia para que tudo corra bem.
      Grande abraço,
      Camila

Deixe um Comentário

* Indicar Campos Obrigatórios