Gostou do Artigo? Compartilhe!
  • 1
    Share

Quer inserir um botão voltar ao topo no seu site ou blog com efeito scroll?

Neste artigo, ensinaremos como inserir botão voltar ao topo, com scroll da tela. De fato, um efeito bonito, faz com que a imagem somente apareça quando o usuário rolar a página para baixo. Este código simples, que vai deixar seu site e ou blog muito mais adaptativo ao usuário.

Primeiramente, o que é botão voltar ao topo?

De antemão, este botão ou imagem, dá ao usuário do seu site ou blog, maior comodidade na navegação. Naturalmente, permite que ele retorne ao topo e selecione outras opções ou mesmo visualize algo no início da pagina. Rigorosamente falando, o usuário não precisa rolar toda a página para cima até chegar ao topo, portanto, poupa bastante tempo.

Sendo assim, a Weblina, disponibiliza um código JavaScript com uma imagem predefinida por você, que fará a função do botão voltar ao topo.

Mas como faço para inserir botão voltar ao topo em meu site ou blog?

Em suma, é muito fácil a introdução deste código em seu site ou blog.

Adicionar o código JavaScript no Blog:

De maneira simples, basta adicionar em um widgets, um campo HTML, desde já, adianto que é importante adicionar preferencialmente no rodapé do seu blog. Caso seja um usuário experiente, pode adicionar este código direto no footer.php

Adicionar o código JavaScript no site:

Assim como no blog, basta adicionar este código em um campo HTML dentro da página, conforme, citado para o blog, é importante adicionar este código no rodapé do site, para aparecer em todas as páginas, assim que o usuário rolar a página para baixo.

Código JavaScript:

Basta alterar a parte em vermelho para o link da imagem que deseja que apareça como opção de voltar ao topo. Indicamos o tamanho da imagem de no máximo 100px x 100px. Assim, não atrapalha o layout do seu site ou blog.

Quer inserir um formulário de contato com anexo em seu site?

Veja o artigo de como inserir um formulário de contato com anexo responsivo em seu site.


Gostou do Artigo? Compartilhe!
  • 1
    Share
Categorias: DesignDicas

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *