Como permitir que os usuários rolem a página a um bloco especificado

Como funciona

Se você quiser chamar a atenção dos usuários para um bloco específico do seu site, você pode configurar a rolagem automática para esse bloco por meio de um código HTML personalizado. Você pode usar uma solução existente ou adicionar seu próprio código.

Como obtê-lo

Usando uma solução existente

1. Abra seu projeto na Conta de Distribuidor.
2. Na barra lateral, clique em Site Builder.
3. Clique em Abrir Site Builder.
4. Adicione o componente Botão ao bloco onde a rolagem deve começar. Altere o texto do botão.
5. Defina o tipo de componente como Link e insira qualquer link no campo.
6. Insira o seguinte código para o bloco Código personalizado:

<script>
(function() {
var scrollBlock = '.block--header';
var scrollBlockNumber = 0;
var scrollButtonNumber = 0;

var scrollToBlockName = '.block--packs';
var scrollToBlockNumber = 0;

var button = document.querySelectorAll(scrollBlock)[scrollBlockNumber].querySelectorAll('.ui-site-calltoaction--link')[scrollButtonNumber];
button.href = 'javascript:void(0)';
button.addEventListener('click', function () {
  var scrollTo = document.querySelectorAll(scrollToBlockName)[scrollToBlockNumber];
  scrollTo.scrollIntoView({ behavior: 'smooth' });
});
})();
</script>

7. Modifique os seguintes parâmetros:
   • scrollBlock — o nome da classe CSS do bloco que contém o botão de rolagem. As opções possíveis são:
     • .block--header (o bloco Cabeçalho)
     • .block--hero (o bloco Chamada para ação)
     • .block--packs (o bloco Pacotes)
   • scrollBlockNumber — o número de sequência do bloco que contém o botão de rolagem. O valor mínimo é 0.
   • scrollButtonNumber — o número de sequência do botão de rolagem. O valor mínimo é 0.
   • scrollToBlockName — o nome da classe CSS do bloco para o qual rolar a página. As opções possíveis são:
     • .block--header (o bloco Cabeçalho)
     • .block--hero (o bloco Chamada para ação)
     • .block--html (o bloco Código personalizado)
     • .block--packs (o bloco Pacotes)
     • .block--description (o bloco Descrição)
     • .block--gallery (o bloco Galeria)
     • .block--requirements (o bloco Requisitos de sistema)
     • .block--faq (o bloco FAQs)
     • .block--embed (o bloco Widgets de mídia social)
     • .block--news (o bloco Notícias)
     • .block--footer (o bloco Rodapé)
   • scrollToBlockNumber — o número de sequência do bloco para o qual rolar a página. O valor mínimo é 0.

8. Clique em Visualizar para ver suas alterações.

Assista ao vídeo tutorial desta instrução:

Como adicionar seu próprio código

1. No Builder, clique em Adicionar bloco e escolha Código personalizado.

2. Insira seu próprio código no bloco.

Links úteis