Do not speak Portuguese? Translate this site with Google or Bing Translator

Artigos - Artigos e dicas feito com PHP + Laravel

Desenvolvedor completamente apaixonado por tecnologia.

Botão Voltar, Atualizar e Avançar
Botão Voltar, Atualizar e Avançar

Posted on: May 01, 2020 12:05 AM

Posted by: Renato

Categories: PHP front-end backend html webdev

Views: 15469

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 (16) Variados (109) PHP (133) Laravel (171) Black Hat (3) front-end (29) linux (114) postgresql (39) Docker (28) rest (5) soap (1) webservice (6) October (1) CMS (2) node (7) backend (13) ubuntu (56) devops (25) nodejs (5) npm (3) nvm (1) git (8) firefox (1) react (7) reactnative (5) collections (1) javascript (7) reactjs (8) 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 (2) 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 (12) 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 (5) data (1) matematica (1) seguranca (2) 100DaysOfCode (9) hotfix (1) documentation (1) laravelphp (10) RabbitMQ (3) Elasticsearch (1) redis (2) Raspberry (4) Padrao de design (4) JQuery (1) angularjs (4) Dicas (43) 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 (2) jwt (5) 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 (3) Architecture (4) sail (3) militar (1) artigo (1) economia (1) forcas armadas (1) ffaa (1) autenticacao (2) autorizacao (2) authentication (4) authorization (3) 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) Axios (1) Fetch (1) Deepin (1) vue (4) nuxt (1) PKCE (1) Oauth2 (2) webhook (1) TypeScript (1) tailwind (1) gource (2)

New Articles


Get Latest Updates by Email