Botões voltar, home, avançar, topo da página, atualizar, fechar página, imprimir, favoritos, indique aos amigos
 |
| Imagem de Picjumbo por Pixabay |
Botões voltar, home, avançar, topo da página, atualizar,
fechar página, imprimir, favoritos, indique aos amigos
Nível: Iniciante
Atualizado: 10/07/2022
Um recurso muito útil e muito usado em sites é um menu com os botões voltar, home, avançar, topo da página, atualizar, fechar página, imprimir, favoritos, indique aos amigos. Estes botões facilitam a navegação do usuário, principalmente se a página foi construída dentro de uma janela popup, que não tem os botões padrão do navegador.
O botão Voltar [history.back( )] restaura a última página registrada no histórico, isto é, a última página visitada. É o mesmo que pressionar o botão Voltar [back( )] da barra de ferramentas do navegador. ( Compatível com qualquer navegador )
<a target="_self" href="javascript:window.history.go(-1)">Voltar</a>Voltar
<a target="_self" href="javascript:window.history.go(-1)"><img border="0" style='border: 0px; padding: 1px' src="http://i254.photobucket.com/albums/hh120/ileitura/go-previous.png"></a>
<input type="button" value="voltar" onclick=javascript:window.history.back()>
************
O botão Home [home( )] abre na janela onde está o link a página definida como página inicial (homepage) do navegador. É o mesmo que pressionar o botão Página inicial [home( )] da barra de ferramentas do navegador.
<a href="javascript:window.history.home()" target="_self">Home</a>Home
<a target="_self" href="#" onclick="this.style.behavior='url(#default#homepage)'; this.setHomePage('https://margaretesmbr.blogspot.com/');">Home</a> Home<a href="javascript:window.history.home()" target="_self"><img border="0" style='border: 0px; padding: 1px' src="http://i254.photobucket.com/albums/hh120/ileitura/go-home.png"></a>
<input type="button" value="Home" onclick=javascript:window.history.home()>
************
O botão Avançar [history.forward( )] carrega a próxima página registrada no histórico, isto é, a próxima página visitada. É o mesmo que pressionar o botão Avançar [forward( )] da barra de ferramentas do navegador.
<a target="_self" href="javascript:window.history.go(1)">Avançar</a>Avançar
<a target="_self" href="javascript:window.history.go(1)"><img border="0" style='border: 0px; padding: 1px' src="http://i254.photobucket.com/albums/hh120/ileitura/go-next.png"></a
<input type="button" value="Avançar" onclick=javascript:window.history.forward()>
************
O botão Topo leva o usuário ao início da página que ele está lendo.
<a target="_self" href="#top">Topo</a>Topo
<a target="_self" href="#top"><img border="0" style='border: 0px; padding: 1px' src="http://i254.photobucket.com/albums/hh120/ileitura/go-top.png"></a>
************
O botão Atualizar [history.go(0)] carrega a mesma página novamente atualizando as informações nela contidas.
<a target="_self" href="javascript:window.history.go(0)">Atualizar</a>Atualizar
<a target="_self" href="javascript:window.history.go(0)"><img border="0" style='border: 0px; padding: 1px' src="http://i254.photobucket.com/albums/hh120/ileitura/view-refresh.png"></a>
<input type="button" value="Atualizar" onclick=javascript:window.history.go(0)>
************
O botão Fechar página [close( )] fecha a janela especificada e pode gerar uma mensagem de confimação de seu fechamento. (Compatível com IE, Netscape 4.45 e 6)
<a target="_self" href="javascript:window.close()">Fechar</a>Fechar
<a target="_self" href="javascript:window.close()"><img border="0" style='border: 0px; padding: 1px' src="http://i254.photobucket.com/albums/hh120/ileitura/emblem-unreadable-1.png"></a>
<input type="button" value="Fechar" onclick=javascript:window.history.close()>
************
O botão Imprimir [print( )] imprime o conteúdo da janela atual.
<a target="_self" HREF="JavaScript:window.print()">Imprimir</a>Imprimir
<a target="_self" HREF="javaScript:window.print()"><img border="0" style='border: 0px; padding: 1px' src="http://i254.photobucket.com/albums/hh120/ileitura/printer.png"></a>
<input type="button" value="Imprimir" onclick=javascript:window.print()>
************
O botão Favoritos abre uma caixa em que o usuário escolhe um nome de referência e o local em que a página atual será inserida nos favoritos do navegador Internet Explorer.
<a target="_self" href="#" onclick="window.external.AddFavorite('https://margaretesmbr.blogspot.com/','Seu site de leitura e cursos');">Favoritos</a> Favoritos<a target="_self" href="#" onclick="window.external.AddFavorite('https://margaretesmbr.blogspot.com/','Seu site de leitura e cursos');"><img border="0" style='border: 0px; padding: 1px' src="http://i254.photobucket.com/albums/hh120/ileitura/emblem-favorite.png"></a> 
<input type="button" value="Favoritos" onclick=window.external.AddFavorite('http://www.margarete.pro.br','Seu site de leitura e cursos');> *************
O botão Indique aos amigos abre o editor de emails com o assunto e a mensagem já definidos anteriormente no próprio código do botão.
<a target="_self" href="mailto:?Subject=Um amigo(a) seu está indicando este site para você.&Body=Um amigo(a) seu visitou o site www.margarete.pro.br, gostou e está recomendando este site para você. Visite o site ileitura em https://margaretesmbr.blogspot.com/">Indique</a>
<a target="_self" href="mailto:?Subject=Um amigo(a) seu está indicando este site para você.&Body=Um amigo(a) seu visitou o site https://margaretesmbr.blogspot.com/, gostou e está recomendando este site para você. Visite o site ileitura em https://margaretesmbr.blogspot.com/"><img border="0" style='border: 0px; padding: 1px' alt="Indique este blog para os seus amigos" src="http://i254.photobucket.com/albums/hh120/ileitura/email_go.png"></a>
Estes botões podem ser aplicados com um javascript muito simples. Para inserí-los, copie os códigos acima e coloque-os entre as tags body <body></body> da sua página:
Veja o resultado:
Voltar | Home | Avançar | Favoritos | Indique | Atualizar | Topo | Imprimir | Fechar
Você pode colocar uma imagem no lugar do texto, como por exemplo um botão.
Voltar | Home | Avançar | Favoritos | Indique | Atualizar | Topo | Imprimir | Fechar
Você pode colocar uma imagem no lugar do texto, como por exemplo um botão.
Compatível com o navegador Internet Explorer.
Postagens
Kara valeu pel post. muito bommmmm
ResponderExcluirvleu masmo
: ) Que bom que eu ajudei!
ExcluirPoxa. tão bom encontrar alguém que nos dê mimo :P. Seu mininu, tava catando esses botões prontos a horas, ficar fazendo dá medo ! :P
ResponderExcluirObrigada mesmo, ta?
Sucesso aqui pra vc.
Cristina
Disponha! Obrigada! : )
Excluirbom! valeu
ResponderExcluirValeu! ; )
ExcluirObg. me judo mt
ResponderExcluirDisponha! : )
Excluir