Do not speak Portuguese? Translate this site with Google or Bing Translator
Botão Voltar, Atualizar e Avançar

Posted on: May 01, 2020 12:05 AM

Posted by: Renato

Views: 14321

Botão Voltar, Atualizar e Avançar

O código apresenta os botões de Voltar, Avançar e Atualizar com a mesma funcionalidade dos botões da barra de tarefas do Browser.



Botão Voltar, Atualizar e Avançar

O código apresenta os botões de Voltar, Avançar e Atualizar com a mesma funcionalidade dos botões da barra de tarefas do Browser.

<html>
<body>
    <form> 
        <input type="button" value="Voltar" onClick="history.go(-1)"> 
        <input type="button" value="Avançar" onCLick="history.forward()"> 
        <input type="button" value="Atualizar" onClick="history.go(0)"> 
    </form>
    </body> 
</html>

via PHP:

echo "<a href='" . $_SERVER['HTTP_REFERER'] . "'>Voltar</a>";

via java script:

<input type='button' value='Voltar' onclick='history.go(-1)' />

Botão "Voltar para o Topo"

Snippet para criar um botão para voltar ao topo do site

  • html

<a href="#top" class="glyphicon glyphicon-chevron-up"></a>

  • css
a[href="#top"]{
    padding:10px;
    position:fixed;
    top: 90%;
    right:40px;
    display:none;
    font-size: 30px;
}
a[href="#top"]:hover{
    text-decoration:none;
}
  • Javascript
$(document).ready(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('a[href="#top"]').fadeIn();
        } else {
            $('a[href="#top"]').fadeOut();
        }
    });

    $('a[href="#top"]').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
});

Como usar

  • Insira o bloco de código HTML no arquivo layouts/default.html antes do fechamento da tag

  • Insira o bloco de código CSS em sua folha de estilo

  • Insira o bloco de código Javascript em seu arquivo JS

 

Fontes:

 

via PHP:

echo "Voltar";

via java script:

Botão "Voltar para o Topo"

Snippet para criar um botão para voltar ao topo do site

  • html

  • css
a[href="#top"]{
    padding:10px;
    position:fixed;
    top: 90%;
    right:40px;
    display:none;
    font-size: 30px;
}
a[href="#top"]:hover{
    text-decoration:none;
}
  • Javascript
$(document).ready(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('a[href="#top"]').fadeIn();
        } else {
            $('a[href="#top"]').fadeOut();
        }
    });

    $('a[href="#top"]').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
});

Como usar

  • Insira o bloco de código HTML no arquivo layouts/default.html antes do fechamento da tag

  • Insira o bloco de código CSS em sua folha de estilo

  • Insira o bloco de código Javascript em seu arquivo JS

Fontes:


3

Share

Donate to Site


About Author

Renato

Developer

Add a Comment
Comments 0 Comments

No comments yet! Be the first to comment

Blog Search


Categories

OUTROS (15) Variados (109) PHP (131) Laravel (159) Black Hat (3) front-end (28) linux (113) postgresql (39) Docker (27) rest (5) soap (1) webservice (6) October (1) CMS (2) node (7) backend (13) ubuntu (54) devops (25) nodejs (5) npm (3) nvm (1) git (8) firefox (1) react (6) reactnative (5) collections (1) javascript (6) reactjs (7) yarn (0) adb (1) Solid (2) blade (3) models (1) controllers (0) log (1) html (2) hardware (3) aws (14) Transcribe (2) transcription (1) google (4) ibm (1) nuance (1) PHP Swoole (5) mysql (31) macox (4) flutter (1) symfony (1) cor (1) colors (2) homeOffice (2) jobs (3) imagick (2) ec2 (1) sw (1) websocket (1) markdown (1) ckeditor (1) tecnologia (14) faceapp (1) eloquent (14) query (4) sql (40) ddd (3) nginx (9) apache (4) certbot (1) lets-encrypt (3) debian (11) liquid (1) magento (2) ruby (1) LETSENCRYPT (1) Fibonacci (1) wine (1) transaction (1) pendrive (1) boot (1) usb (1) prf (1) policia (2) federal (1) lucena (1) mongodb (4) paypal (1) payment (1) zend (1) vim (4) ciencia (6) js (1) nosql (1) java (1) JasperReports (1) phpjasper (1) covid19 (1) saude (1) athena (1) cinnamon (1) phpunit (2) binaural (1) mysqli (3) database (42) windows (6) vala (1) json (2) oracle (1) mariadb (4) dev (12) webdev (24) s3 (4) storage (1) kitematic (1) gnome (2) web (2) intel (3) piada (1) cron (2) dba (18) lumen (1) ffmpeg (2) android (2) aplicativo (1) fedora (2) shell (4) bash (3) script (3) lider (1) htm (1) csv (1) dropbox (1) db (3) combustivel (2) haru (1) presenter (1) gasolina (1) MeioAmbiente (1) Grunt (1) biologia (1) programming (22) performance (3) brain (1) smartphones (1) telefonia (1) privacidade (1) opensource (3) microg (1) iode (1) ssh (3) zsh (2) terminal (3) dracula (1) spaceship (1) mac (2) idiomas (1) laptop (2) developer (37) api (4) data (1) matematica (1) seguranca (2) 100DaysOfCode (9) hotfix (1) documentation (1) laravelphp (10) RabbitMQ (1) Elasticsearch (1) redis (2) Raspberry (4) Padrao de design (4) JQuery (1) angularjs (4) Dicas (40) Kubernetes (3) vscode (2) backup (1) angular (3) servers (2) pipelines (1) AppSec (1) DevSecOps (4) rust (1) RustLang (1) Mozilla (1) algoritimo (1) sqlite (1) Passport (1) jwt (4) security (2) translate (1) kube (2) iot (1) politica (2) bolsonaro (1) flow (1) podcast (1) Brasil (1) containers (3) traefik (1) networking (1) host (1) POO (2) microservices (2) bug (1) cqrs (1) arquitetura (2) Architecture (3) sail (3) militar (1) artigo (1) economia (1) forcas armadas (1) ffaa (1) autenticacao (1) autorizacao (2) authentication (4) authorization (2) NoCookies (1) wsl (4) memcached (1) macos (2) unix (2) kali-linux (1) linux-tools (5) apple (1) noticias (2) composer (1) rancher (1) k8s (1) escopos (1) orm (1) jenkins (4) github (5) gitlab (3) queue (1) Passwordless (1) sonarqube (1) phpswoole (1) laraveloctane (1) Swoole (1) Swoole (1) octane (1) Structurizr (1) Diagramas (1) c4 (1) c4-models (1) compactar (1) compression (1) messaging (1) restfull (1) eventdrive (1) services (1) http (1) Monolith (1) microservice (1) historia (1) educacao (1) cavalotroia (1) OOD (0) odd (1) chatgpt (1) openai (3) vicuna (1) llama (1) gpt (1) transformers (1) pytorch (1) tensorflow (1) akitando (1) ia (1) nvidia (1) agi (1) guard (1) multiple_authen (2) rpi (1) auth (1) auth (1) livros (2) ElonMusk (2) Oh My Zsh (1) Manjaro (1) BigLinux (2) ArchLinux (1) Migration (1) Error (1) Monitor (1) Filament (1) LaravelFilament (1) replication (1) phpfpm (1) cache (1) vpn (1) l2tp (1) zorin-os (1) optimization (1) scheduling (1) monitoring (2) linkedin (1) community (1) inteligencia-artificial (2) wsl2 (1) maps (1) API_KEY_GOOGLE_MAPS (1) repmgr (1) altadisponibilidade (1) banco (1) modelagemdedados (1) inteligenciadedados (4) governancadedados (1) bancodedados (2) Observability (1) picpay (1) ecommerce (1) Curisidades (1) Samurai (1) KubeCon (1) GitOps (1)

New Articles



Get Latest Updates by Email