Vá para a tecla page up. Crie um botão “Voltar ao topo” ou Rolar para o topo usando jQuery

| 09.10.2014

O botão "Voltar ao topo" é muito usado em sites onde existem muitas páginas longas. Quando um usuário, visualizando um grande artigo, galeria de fotos, notícias em redes sociais etc., quer voltar ao topo da página, ele rola por um longo tempo (o que não é muito conveniente), ou pressiona a tecla Home do teclado, ou usa o botão especial “Voltar ao topo”.

A vantagem deste botão é que ele pode funcionar em tablets e smartphones, e em qualquer outro caso onde você não tenha um teclado em mãos. Além disso, nem todos os usuários podem saber sobre função útil Teclas Home, e o botão no site está sempre visível, você pode ver imediatamente para que serve. A segunda vantagem é que este botão pode ser melhorado e feito de forma que retorne o usuário ao local da página de onde veio ao topo. É esta versão do botão que faremos hoje. Você pode ver a demonstração e também baixar o arquivo de exemplo para o seu computador.

A parte do CSS que trata do estilo dos botões é semelhante a esta:

InTop ( posição: fixa; esquerda: 0px; topo: 0px; largura: 20%; altura: 100%; opacidade: 0,5; filtro: alfa (opacidade = 50); cursor: ponteiro; display: nenhum; ) .inTop:hover ( cor de fundo: #f5f4f4; opacidade: 1; filtro: alfa (opacidade = 100); ) .inTop span ( display: bloco; largura: 100%; margem superior: 20px; alinhamento de texto: centro; tamanho da fonte : 110%; cor: #52466a; família de fontes: Georgia, Times; peso da fonte: negrito)

A próxima etapa é o código JavaScript. Por conveniência, comentários com explicações foram adicionados dentro de:

// declaração de variáveis: var BottomPosition = 0; // posição da página var BottomFlag = false; // sinalizador para exibir o botão GO TO BOTTOM var AnimateFlag = false;// sinalizador para executar a animação $(document).ready(function() ( $(".inTop").click(function() ( // clicar em o botão GO TO TOP/GO TO BOTTOM AnimateFlag = true; // a animação é executada if(BottomFlag) ( // se o botão GO TO BOTTOM for pressionado... $("body,html").animate(("scrollTop ":BottomPosition), 200, function() ( // ...retorna ao local desejado na página a uma velocidade de 200 AnimateFlag = false; // a animação terminou )); // substitui o botão $(" .inTop span").html ("GO TO TOP"); ) else ( // se o botão GO TO TOP for pressionado... $("body,html").animate(("scrollTop":0), 200, function() ( // . ..retorna ao topo da página a uma velocidade de 200 AnimateFlag = false )); (".inTop span").html("GO TO BOTTOM"); rolando a página: $(window).scroll(function(event) ( var countScroll = $(window).scrollTop ();

));

Etapa 3. HTML

Só falta criar um botão em HTML:

IR PARA O TOPO

Isso é tudo, um botão Voltar ao topo simples, mas muito conveniente, para o site com função de retorno está pronto. Você mesmo pode personalizar seu estilo, de acordo com o seu site. Desejamos a você sucesso criativo e usuários satisfeitos! Em sites com muito conteúdo (por exemplo, blogs) basta usar o botão “Voltar ao topo”. Afinal, um usuário que leu um artigo longo pode precisar retornar ao

Portanto, para facilitar a navegação no site, é utilizado um botão de rolagem de página. Você pode criar esse botão sem usar JavaScript (somente com usando CSS), e assim com ele. Vejamos as implementações mais simples desses métodos.

Vantagem este método- facilidade de uso (não há necessidade de usar bibliotecas ou scripts adicionais).

Botão superior com CSS - "Nubex" .topNubex (posição: fixa; direita: 45px; inferior: 45px; ) Superior

As desvantagens deste método são que neste caso a rolagem não pode ser suave e o visitante é instantaneamente redirecionado para o topo da página.

O método abaixo usa a biblioteca JQuery. É fácil de usar e permite rolar a página sem problemas.

Botão superior usando JavaScript - "Nubex" #topNubex (posição: fixa; direita: 45px; inferior: 45px; ) $(function() ( $(window).scroll(function() ( if($(this) .scrollTop( ) != 0) ( $("#topNubex").fadeIn(); ) else ( $("#topNubex").fadeOut(); ) )); ($("corpo,html").animate((scrollTop:0),700); ));

Este exemplo usa uma imagem como plano de fundo do botão. Você pode personalizar a exibição do botão usando estilos CSS (tamanho, cor, contorno, transparência, etc.). Assim, este método é mais flexível e oferece mais opções ao adicionar um botão “Voltar ao topo” ao seu site.

O botão “Voltar ao topo” é algo que muitos de vocês provavelmente já viram em muitos sites. Esta é a seta que aparece no canto inferior direito de uma página da web conforme você rola. Ao clicar, você volta ao topo da página. Se você deseja adicionar um botão Voltar ao início como parte do processo de design do seu site ou simplesmente está se perguntando como você mesmo pode criar um, seja bem-vindo!

Nosso código consistirá em duas partes, Estilos CSS e pequenino script jQuery. Vamos começar com CSS.

Começaremos criando os estilos e marcações para nosso botão. Aqui está a parte HTML:

< link rel= "folha de estilo" href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" >

< a eu ia= "botão" >

O botão consistirá em apenas uma tag âncora com botão de identificação. Também incluímos um link para a biblioteca FontAwesome para que possamos usar um ícone para nosso botão.

Os estilos iniciais do botão ficarão assim:

#button (display: bloco embutido; cor de fundo: #FF9800; largura: 50px; altura: 50px; alinhamento de texto: centro; raio da borda: 4px; margem: 30px; posição: fixa; inferior: 30px; direita: 30px; transição: cor de fundo .3s; índice z: 1000 ) #button:hover (cursor: ponteiro; cor de fundo: #333; ) #button:active (cor de fundo: #555; )

Como o botão é um elemento de pacote e os pacotes são elementos embutidos por padrão, precisamos alterar a propriedade display para um bloco embutido para que possamos atribuir um tamanho a ele.

Vamos fazer um botão quadrado de 50x50 px com cantos arredondados de 4px. Daremos a ele uma cor laranja brilhante e 30px de cada lado. A posição fixa sempre permite que nosso botão fique no mesmo lugar quando rolamos a página, e o índice z é tão alto que o botão sempre se sobrepõe a outros elementos do site. Quando passamos o mouse sobre o botão, o cursor muda para um ponteiro e o fundo fica cinza escuro. Para tornar a transição suave, definiremos a transição para 0,3 segundos para a propriedade background-color. Além disso, quando pressionamos o botão, a cor de fundo também muda e fica um pouco mais clara.

Agora que nosso botão está vazio, vamos adicionar um ícone a ele. Fazemos isso adicionando um elemento ::after pseudo= como este:

#button::after ( content: "\f077"; font-family: FontAwesome; font-weight: normal; font-style: normal; font-size: 2em; line-height: 50px; color: #fff; )

Selecionaremos um ícone da biblioteca de fontes mais popular, FontAwesome. Vamos começar com o ícone Chevron Up.

Para exibi-lo em um pseudoelemento, defina a tag font-family como FontAwesome e atribua um valor Unicode ao seu ícone em content .

Certifique-se também de que a altura da linha seja igual à altura do ícone se desejar que ela seja centralizada horizontalmente.

Nesta subseção falaremos sobre como realmente fazer o botão funcionar. A maneira mais fácil de fazer isso é usar a biblioteca jQuery JavaScript. Primeiro precisamos adicionar jQuery à marcação HTML. Adicione esta linha logo antes da tag body de fechamento.

< script fonte=" https:// cdnjs. nuvem flare. com/ ajax/ bibliotecas/ jquery/3.1.1/ jquery. min. js">

Agora podemos escrever nosso script usando a sintaxe jQuery. Adicione este script após a linha jQuery:

jQuery(document).ready(function() ( var btn = $("#button"); $(window).scroll(function() ( if ($(window).scrollTop() > )); btn.on ("clique", função(e) ( e.preventDefault(); $("html, corpo").animate((scrollTop:0), "300"); ));

Vamos dar uma olhada mais de perto neste script. Você provavelmente notou a primeira linha de código:

jQuery(documento).ready(função() (

Você só deve executar o código dentro desta função se o documento estiver totalmente carregado. Essa é uma ótima maneira de evitar erros se o seu código JavaScript quiser fazer alterações em partes da página da web que não estão totalmente carregadas no navegador. O código que executamos após o documento ser totalmente carregado e consiste em dois blocos principais de código, cada um fazendo seu próprio trabalho. A primeira parte do script faz nosso botão aparecer e desaparecer após a rolagem da página atingir um determinado ponto. A segunda parte faz a página rolar para cima após clicar no botão. Vejamos cada um deles em detalhes.

Aqui está o código responsável por esta função:

Var btn = $("#botão");

$(window).scroll(function() ( if ($(window).scrollTop() > 300) ( btn.addClass("show"); ) else ( btn.removeClass("show"); ) ));

Primeiro declaramos a variável btn e atribuímos a ela o ID do botão para que possamos consultá-la mais facilmente posteriormente no código. Também ajuda o JavaScript a realizar cálculos com mais rapidez. Depois que armazenarmos o elemento em uma variável, o JavaScript não precisará pesquisar a página inteira muitas vezes quando precisarmos usá-lo novamente em nosso código.

jQuery tem uma função .scroll() útil.

Ele vincula um trecho de código que será executado sempre que houver uma rolagem em sua página da web. Leva um parâmetro para uma função que é executada toda vez que a página é rolada. Você pode aplicá-lo a qualquer elemento rolável, como quadros e elementos com propriedades adicionais definidas para rolagem.

Normalmente aplicamos isso a um elemento de janela, pois é onde a rolagem ocorre na maioria dos casos, incluindo nosso exemplo.

$(janela). rolar(função()(

Dentro da função colocamos uma instrução if/else:

Para obter a posição atual da barra de rolagem, usaremos o método .scrollTop() integrado do jQuery. Ele simplesmente retorna alguns pixels ocultos acima da área de rolagem.

Assim, toda vez que rolamos a página, o JavaScript verifica quantos pixels estão ocultos e os compara com o número. No nosso caso esse número vai até 300, mas você pode alterá-lo se quiser.

Se formos para 300px, adicionaremos uma classe show ao nosso botão que o fará aparecer. Se o número for menor que 300, removemos esta classe. Adicionar e remover classes é outro motivo pelo qual o jQuery é tão popular. Podemos fazer isso usando dois métodos simples addClass() e removeClass(). Porém, ainda não temos uma classe show em nosso CSS, então vamos adicionar uma:

$(janela). rolar(função()(

Por padrão, seu botão ficará oculto, então precisamos adicionar mais algumas regras ao elemento #button:

#button (transição: cor de fundo 0,3s, opacidade 0,5s, visibilidade 0,5s; opacidade: 0; visibilidade: oculto; )

Para tornar a transição suave, vamos adicionar mais dois valores ao atributo de transição, opacidade e visibilidade, definidos como 0,5 segundos.

A segunda parte do script permite que você suba as escadas depois de pressionar um botão.

Btn.on("clique", function(e) ( e.preventDefault(); $("html, corpo").animate((scrollTop:0), "300"); ));

O primeiro método jQuery que vemos aqui é on() .

Seu primeiro parâmetro é um evento de “clique” JavaScript que ocorre toda vez que clicamos em nosso navegador. O segundo parâmetro é uma função de processamento executada assim que o evento ocorre.

A função de processamento aceita um parâmetro de evento. Podemos nomeá-lo como quisermos, mas e ou evento geralmente são preferidos. Precisamos de um parâmetro de evento para passar para a função e usá-lo para o método preventDefault(). O método e.preventDefault() evita que o evento faça algo aleatório, como o link não nos levar para a próxima página. No nosso caso, isso não é crítico, pois nosso elemento âncora não possui um atributo href e não nos levaria de qualquer maneira nova página

, mas é sempre melhor verificar novamente.

O método jQuery .animate() é aquele que faz todo o truque.

$("html, corpo").animate((scrollTop:0), "300"); O primeiro parâmetro do método .animate() é uma lista de propriedades que devemos animar. Nossa propriedade se chama scrollTop e queremos que ela tenha o valor 0. O tipo deste parâmetro é então precisamos usar chaves e escrever nossos valores usando a sintaxe do par chave/valor.

O segundo parâmetro é a velocidade com que queremos que nossa animação comece. É medido em milissegundos e quanto maior o número, mais lenta é a animação. O valor padrão é 400, mas vamos alterá-lo para 300.

Finalmente, aplicamos o método animate aos elementos HTML e body da nossa página.

Agora, cada vez que clicamos no botão, ele nos leva de volta ao topo da página.

Você pode ver a versão final na demonstração do CodePen. Também incluí um texto de exemplo para fins de demonstração.

Veja o código do botão Voltar ao topo de Matthew Cain (@matthewcain) no CodePen.

O botão “Voltar ao topo” é uma ferramenta útil no design da interface da página. E se o seu site tiver um, isso tornará a interação dos visitantes com o site muito mais conveniente. Este guia ajudará você a entender CSS e JavaScript, mesmo se você não for um desenvolvedor web. Espero que o post tenha sido útil para você e com certeza você conseguirá fazer esse botão!

O botão “Voltar ao topo” ou “ ” é um elemento popular e útil nas páginas de sites modernos, especialmente nos casos em que essas páginas contêm muito conteúdo.
Em primeiro lugar, geralmente melhoram a usabilidade do site. Quando um usuário lê uma grande quantidade de conteúdo e rola até o final da página para retornar ao topo do site, ele usa a rolagem padrão. Para garantir que o usuário seja redirecionado automaticamente para o topo da página, os desenvolvedores e administradores de sites que pensam em seus visitantes usam diversas variações dos botões “Retornar ao topo”. Estes podem ser os mais soluções simples sem utilizar bibliotecas ou scripts adicionais, bem como com funcionalidade estendida, com a conexão de uma biblioteca e um pequeno script de execução.

Os botões “Voltar ao topo” são projetados de diferentes maneiras; podem ser links de texto banais, botões de aparência clássica, botões redondos com uma seta ou podem usar uma imagem do tipo apropriado. Na maioria das vezes, esses botões parecem estáticos; às vezes, mudam a cor de fundo e a fonte ao passar o mouse com menos frequência; os desenvolvedores usam efeitos de animação.

Hoje, em exemplo simples, vamos ver como você pode usar a animação CSS para adicionar um pouco de movimento ao botão pop-up “Voltar ao topo” e, ao mesmo tempo, vamos dar uma olhada no próprio script que contém os eventos jQuery necessários para o botão funcionar.

Para habilitar um botão em seu site, não há necessidade de adicionar tags à marcação Páginas HTML. Basta conectar a biblioteca jQuery e escrever um pequeno js executável, e o botão funcionará. Criaremos a aparência e a animação usando CSS conectando o arquivo style.css ao documento html.

E assim, se o seu site ainda não possui a biblioteca jQuery conectada, isso pode ser feito facilmente conectando-se versão atual diretamente da rede de entrega de conteúdo (CDN) do Google, tudo que você precisa fazer é adicionar a seguinte linha antes da tag de fechamento:

Abaixo, logo abaixo desta linha, coloque um pequeno executável js, que exibirá nosso botão com um certo atraso, e também executará sua função principal, retornando suavemente o usuário ao topo da página.

jQuery(document).ready(function($)( var //velocidade de rolagem até o topo da página speed = 500, //layout do botão html $scrollTop = $(" ").appendTo("body"); $scrollTop.click(function(e)( e.preventDefault(); $("html:not(:animado),body:not(:animado)").animate(( scrollTop: 0), speed )); //definindo o modo de aparência da função do botão show_scrollTop() ( ($(window).scrollTop() > 300) ? $scrollTop.fadeIn(600) : $scrollTop.fadeOut (600); ) $(janela).scroll(function() ( show_scrollTop(); ));

Adicionei alguns comentários ao roteiro, por assim dizer, para maior compreensão. Como escrevi acima, este método elimina a necessidade de adicionar tags à marcação da página HTML; Quando o usuário rolar a página 300px para baixo, o plugin escreverá uma tag de botão, no nosso caso é:

no corpo da página, tudo no mesmo lugar antes da tag de fechamento.

Para aparecer e ocultar suavemente o botão, usamos as funções .fadeIn () e .fadeOut () com uma determinada velocidade de 600 milissegundos. A velocidade de rolagem até o topo da página é definida como 500 milissegundos.

Para marcar o botão usei a tag , o link para o qual especifiquei um hash (hash), o atributo title - quando você passa o mouse sobre o botão, uma dica de ferramenta padrão será exibida, atribuída a uma determinada classe com o nome do seletor scrollTop e usada uma fonte de ícone da fonte Pacote incrível como âncora do link .
Agora, sabendo o nome do seletor, diretamente em CSS, utilizando determinadas propriedades, vamos animar nosso botão, criar aparência, determinaremos onde ele aparecerá na página e também anexaremos a animação.
Dentro do código CSS, adicionei comentários detalhados a quase todas as propriedades, então não vejo sentido em descrever tudo em detalhes, vou me concentrar especificamente no efeito de animação e na conexão de ícones de fonte como um elemento de botão.
O ícone pode ser diferente, não igual ao exemplo, o principal é que corresponda à finalidade direta do botão, no nosso caso é qualquer símbolo de índice, por exemplo, setas simples, volumosas ou finas, com ou sem preenchimento, indicando claramente a direção da rolagem ao clicar no botão.
Para utilizar os ícones Font Awesome não há necessidade de baixar o pacote completo, é possível conectar a biblioteca diretamente, por exemplo com o Bootstrap CDN, para isso na seção HTML basta escrever a seguinte linha:

Após conectar o Font Awesome, você pode utilizá-los em código HTML ou, como no nosso caso em js, utilizando classes especiais, uma base fa e uma classe para um tipo específico de ícone, no nosso caso é fa-angle-double-up . Você pode descobrir a classe de um ícone específico no site.
A aparência do container do ícone, tamanho e cor do fundo, posicionamento, cor e tamanho da fonte, tudo isso é determinado diretamente no css, com foco no selector.scrollTop i

/* forma o corpo do botão, posição e efeito de transição */ .scrollTop ( /* oculto por padrão */ display: none; /* cantos arredondados */ -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100% /* fixa a posição do botão */ posição: fixa; * visualização do cursor */ cursor: ponteiro; /* efeito de transição entre dois estados de botão */ -webkit-transition: bottom 0,2s cúbico-bezier(0,42, 0, 0,58, 1); bezier(0,42, 0, 0,58, 1); -ms-transição: fundo 0,2s cúbico-bezier(0,42, 0, 0,58, 1); cube-bezier(0.42, 0, 0.58, 1) /* desloca o botão para cima ao passar o mouse */ .scrollTop:hover ( bottom: 2rem ) / * elementos adicionais de design de botão */ .scrollTop:before, .scrollTop:after ( content : ""; topo: 0; esquerda: 0;

Resta considerar a animação em si. O efeito de animação não é aplicado ao botão inteiro, mas aos pseudoelementos adicionais:after e:before . Para criar uma animação CSS, é necessário adicionar uma propriedade de animação aos estilos desses elementos, que permitirá definir um nome, ajustar a aceleração e duração da animação, além de outros detalhes de como a animação deve fluir. A aparência da animação é configurada através de @keyframes, um conjunto de chaves que configuram os frames da animação.

Em nosso exemplo, o nome da animação é clickMe, a duração é de 1,8s, o atraso é de 333ms para:before e 777ms para o pseudoelemento:after. Determinamos também o número de repetições da animação - infinito infinito e o tipo de animação fade-out - aceleração no início.

Depois de configurarmos as propriedades temporárias da animação, resta determinar a aparência da animação, isso é feito dentro do bloco @keyframes. Primeiro é dado o nome da animação e depois seus passos são descritos entre chaves. No exemplo de código você pode ver que são usados ​​​​quadros da propriedade opacidade (transparência) e transformação do elemento transform com a função de escala - a escala do elemento. As etapas da animação são especificadas usando porcentagens.
Animação Propriedades CSS descrito separadamente para navegadores webkit @-webkit-keyframes e Navegador Mozilla Firefox @-moz-keyframes para evitar que as animações sejam exibidas incorretamente nesses navegadores.

Isso é tudo. Mais uma vez, veja um exemplo ao vivo de como funciona o botão “Voltar ao topo” e se precisar, baixe as fontes compactadas em um arquivo e postadas na nuvem no Y.Disk.

Atenciosamente, Andrey

Uma função como o botão “para cima” de um site torna o recurso da Internet mais conveniente para seus visitantes. Ele ajuda você a passar facilmente de qualquer lugar da página para o topo da página. Isso é obrigatório para lojas online e sites com artigos grandes que exigem uma longa rolagem para baixo.

Sobre no momento Na maioria dos sites não existe a função de botão “para cima” e não há nada de crítico nisso. Mas a sua utilização pode trazer muitas vantagens tanto para o recurso Internet como para os seus visitantes.

Muitas vezes acontece quando a página de um recurso da Internet está muito carregada de informações, quando um artigo informativo ocupa muito espaço e você tem que rolar a página para baixo usando a roda do mouse. Além disso, no final do artigo pode haver muitos comentários sobre o mesmo.

Quando um visitante está lendo um artigo, não há nada de tedioso em rolar a página para baixo, mas quando o texto chega ao fim e você tem que subir, começa a ficar um pouco cansativo. A maioria das pessoas simplesmente terá preguiça de navegar por um longo tempo e simplesmente fechará o site em vez de vagar por sua extensão.

Usar um botão para ir instantaneamente para o topo da página torna seu tempo no site mais conveniente.

Os aspectos positivos para o recurso em si vêm de fatores passados, pois a navegação simplificada pelo site melhora os fatores comportamentais, já que todos os visitantes serão mais ativos em suas ações e passarão para outras páginas.

Assim, os dados influenciam a atitude de todos os motores de busca em relação ao site e levam a uma melhoria do seu lugar nos resultados de pesquisa.

• criando uma imagem;
• criando um roteiro;
• criando um estilo de botão;
• adicionando ao site.

Para adicionar um botão “voltar ao topo” em um site, primeiro você precisa fazer o próprio ícone, que, ao ser clicado, moverá o usuário para o topo da página. Para isso, você pode utilizar opções prontas, entre as quais você sempre pode escolher a mais adequada.

Para melhorar o aspecto do botão é necessário fazer algumas melhorias, nomeadamente, fazer um sprite que permite combinar imagens de fundo baseadas em CSS, criando assim animação a partir delas.

Para trabalhos gráficos você pode usar qualquer editor. Mas a opção mais conveniente seria o serviço online PIXLR, já que você não precisa baixar nada aqui e pode utilizá-lo diretamente no seu navegador.

Para começar, na janela do editor que aparece, você precisa selecionar o campo “Carregar imagem do computador”. Tomemos como exemplo a imagem de um foguete.

Se as dimensões do ícone selecionado forem muito grandes, será necessário fazer um pequeno ajuste de tamanho. Para isso, vá ao menu superior e selecione o campo “Editar”, e depois “Transformação livre...”

A seguir, marcadores especiais aparecem ao lado da imagem; ao movê-los, você pode alterar o tamanho da imagem. Para manter as proporções, você pode usar a tecla Shift, enquanto a mantém pressionada, você precisa mover os marcadores azuis. Ao final dessas ações, é obtida a imagem de um foguete.

A próxima etapa é criar uma cópia da camada.

Agora você precisa mover um pouco a imagem do foguete da nova camada. Para isso, será conveniente utilizar a ferramenta mover, localizada na segunda coluna do menu esquerdo, e a seta para cima do teclado.

Agora você precisa deixar a imagem superior em preto e branco. Isso pode ser feito usando o item “Correção” - “Matiz/Saturação” no menu superior. Para dessaturação completa, o controle deslizante Saturação deve ser definido como -100. Esta ação permitirá que você crie um efeito no qual o botão “Para cima” mudará de preto e branco para colorido quando você passar o mouse sobre ele.

O toque final é remover o espaço extra ao redor das duas fotos. Para fazer isso, selecione o item “Cortar” no menu esquerdo e selecione apenas dois foguetes em um retângulo. Para realizar o recorte, pressione a tecla Enter.

O resultado é uma imagem em que não há desnecessário espaço livre. Você precisará anotar a largura e a altura da imagem resultante, pois esses dados serão úteis na próxima etapa.

Para salvar, você precisa clicar em “Arquivo” - “Salvar”, onde no item esquerdo “Meu Computador” anotamos o nome da imagem (somente layout em inglês), selecione o formato (em nesse caso- PNG) e clique no botão “Sim”.

Não há necessidade de escrever um script neste caso. Será possível usar a opção publicamente disponível fazendo algumas alterações no código finalizado.

Para fazer isso, você precisará baixar qualquer editor de código. A opção mais popular e também gratuita é o Notepad++. Depois de instalá-lo, você precisa copiar e colar todo este código nele:

Para instalar um botão de rolagem para cima em um site, você precisa colocar o código no local desejado. Você precisa inseri-lo antes da tag .

Na maioria das vezes, o botão “para cima” de um site está localizado na parte inferior (“rodapé”).

Você deve adicionar o seguinte código ao arquivo style.css do site:

Neste caso, você precisará dos dados de largura e altura da imagem. Resta inserir os dados recebidos no código e o botão “up” do site estará pronto! O que mais?

Para este CMS, o botão “Top” pode ser criado usando plugins, bem como de forma independente.

O método plugin é o mais prático e fácil de instalar, pois basta clicar no botão instalar e configurar todas as funcionalidades no menu plugin.

A escolha deste último deve ser feita com cautela, pois com ele você pode facilmente adquirir um vírus para o site. A opção mais popular e comprovada é um plugin chamado Scroll Back To Top. Você pode baixá-lo usando a pesquisa padrão do plugin Wordpress.

Esta extensão possui múltiplas funcionalidades e será muito fácil personalizar o botão "voltar ao topo" de um site Wordpress. Não é necessário alterar todos os valores; basta configurar a aparência e localização do botão na página do site.

Como você pode ver, instalar o botão “up” usando plugins é muito simples. Mas há uma nuance importante: todos plug-in instalado carrega o CMS. Isso pode afetar a velocidade do recurso da Internet. É por isso que a maioria dos proprietários de sites tenta fazer todas as alterações diretamente no código, e não usando extensões de terceiros. Você pode criar um botão “para cima” para um site em HTML, o que minimizará os recursos consumidos.

Antes de mudar todo mundo arquivos do sistema Wordpress precisa torná-los cópias de segurança. A seguir, você pode seguir todos os passos para criar seu próprio botão descritos acima.

O CMS Joomla também suporta a instalação de plugins, assim como o Wordpress. A versão de maior sucesso do botão "top" para um site no Joomla 3 é uma extensão chamada Top of the Page.

Neste CMS, qualquer plugin pode ser instalado através do “Extension Manager”. Para fazer isso você precisa:

• baixe o plugin na Internet;
• clique no botão “Navegar” no gerenciador de extensões;
• selecione o arquivo baixado;
• Clique em "Baixar" e instale.

Agora você precisa ativá-lo no Gerenciador de Plugins. Para fazer isso, você precisa ir até esta seção, encontrar o plugin e mudar seu status para “ativado”.

O topo da página possui as seguintes funcionalidades:

• Executar em/ administrador - habilitando a opção não só no recurso da Internet, mas também no próprio painel Joomla CMS.
• Posição de revelação do botão - quantos pixels o usuário deve retroceder para que o botão “para cima” apareça.
• Omitir texto do botão - presença de texto no botão.
• Sempre no topo - a página do site sempre será exibida desde o início. Ao usar âncoras para rolar até um local específico da página, esta opção não precisa ser ativada.
• Smooth Scroll - torna a rolagem da página mais suave.
• Duração da rolagem - o tempo após o qual a página voltará completamente ao início.
• Scroll Transition - adiciona ótimos efeitos visuais à rolagem.
• Transition Easing - “aliviar” o movimento para o topo da página.
• Localização do link - localização do ícone. Por padrão, o botão está localizado no canto inferior direito.
• Usar Estilos – estilo de botão individual, que pode ser definido no campo abaixo. Se alterado para um valor negativo, todos os parâmetros de estilo serão retirados do tema ativo do site.
• Estilo do link - campo para inserir os parâmetros de estilo do botão.

Para personalizar você mesmo o estilo do botão “para cima”, você deve ter pelo menos um conhecimento mínimo de CCS. EM de outra forma Vale a pena mudar o valor do penúltimo parâmetro para “Não”.

Outra nuance importante é que a inscrição usual no ícone contém texto em inglês: Return to Top. Esse texto não pode estar presente em um site em russo, então você deve simplesmente desativá-lo nas configurações do plugin ou alterá-lo para russo.

Para alterar esta inscrição, você precisa fazer login no servidor do site usando FTP ou hospedagem integrada gerenciador de arquivos. A seguir, no diretório “/administrator/language/en-GB/” você precisa encontrar um arquivo chamado “en-GB.plg_system_topofthepage.ini”.

Antes de alterar o texto, você deve alterar a codificação deste documento para UTF-8. Isso permitirá a exibição normal das letras russas.

e mude a frase entre aspas para russo. Você pode usar frases como “Para cima!”, “Para o início!” ou “Para cima!”

O botão "up" de um site no Ucoz deverá ser feito por injeção de código, pois é impossível conectar plugins para este CMS. Porém, isso não requer um longo estudo dos arquivos do sistema e a busca pelas linhas necessárias, bastando inserir; código pequeno para o local requerido.

Para instalação precisaremos de:

• vá em “Painel de Controle -> Design -> Gerenciamento de Design (templates) -> Parte inferior do site;
• insira o script (pode ser encontrado no site oficial do projeto e em recursos de terceiros).

Depois disso, um ícone aparecerá no canto inferior direito, movendo o usuário para o topo da página.

Como você pode ver, instalar um botão “Voltar ao topo” para qualquer um dos CMSs não foi particularmente difícil. Você pode usar um método de instalação automatizado (plugins) ou manual. Porém, a última opção continua a ser a mais adequada, uma vez que não tem impacto negativo no desempenho do site.

Você pode usar o botão "voltar ao topo" de um site HTML para minimizar o consumo de recursos do site, pois um grande número de extensões pode ter um impacto negativo no desempenho do recurso. Um plugin de botão “para cima” não afetará muito o tempo de carregamento das páginas do site, mas na maioria dos casos o usuário possui pelo menos uma dúzia de plugins instalados no CMS. Nesse caso, qualquer plugin pode afetar negativamente o desempenho das páginas do site.