JavaScript para Subir a Página ao Topo Suavemente


JavaScript

A algum tempo estava procurando um script que executa-se este efeito, mas como tinha encontrado um  pouco complicado, acabei desistindo, hoje novamente precisei deste script  para dar uma sensação mais suave quando o usuário clicar no link topo do site a página subiria de uma forma agradável, então em minhas buscas encontrei este JavaScript simples e fácil de implementar.

Primeiramente é necessário inserir o link da biblioteca JQuery, você pode utilizar a que “puxa” do Google ou então colocar o arquivo js dentro do seu site.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>


Em segundo é necessário inserir a ID do código Java Script na sua ancora.

<a  href="#" id="subir"></a>


Em terceiro lugar inserir o script abaixo, pode ser dentro de um arquivo .js ou então no fim da sua body mesmo.


<script type="text/javascript">
    $(document).ready(function() {
       $('#subir').click(function(){ 
          $('html, body').animate({scrollTop:0}, 'slow');
      return false;

         });
     });

</script>

 





Artigos Relacionados


Designer de Interface pós graduado em Arquitetura da Informação. UI/UX Designer e Front-end Developer, atualmente atendo empresas como freelancer e sou colaborador em uma agência de comunicação onde desenvolvo interfaces criativas com foco na experiência do usuário. Organizador por natureza acredito que o caos é a matéria-prima necessária.

11 comentários em “JavaScript para Subir a Página ao Topo Suavemente

  1. Alexandre 21 de janeiro de 2015 11:55

    E como fazer para NÃO subir para o topo ? Gostaria que a página ficasse na mesma posição quando o usuario clicar no link.

  2. Lucivan Max 29 de julho de 2014 12:01

    Funcionou !
    Me salvou por aqui.
    Parabéns!

  3. Pedro Henrique 19 de fevereiro de 2014 12:06

    Funcionou perfeitamente, estive à procura, mas só achei aqui!
    Valeu mesmo.

  4. Felipe 31 de outubro de 2012 14:52

    Consegui fazer subir a página suavemente.
    Mas, como faz pra rolar suavemente até uma âncora?

    • Robson Moulin 7 de novembro de 2012 14:57

      Não tentei, talvez você possa setar o id na ancora não tenho certeza precisaria testar.

  5. welliton 24 de agosto de 2012 15:28

    todos navegadores funfa ( TO SEM O SINAL DE INTERROGAçãO )

  6. @Ka_not 9 de outubro de 2011 18:35

    haha
    muito legal, eu tinha visto esse tipo de efeito no tumblr,
    vou começar a utilizar ele mais, e melhora-lo é claro,
    tem umas que, de acordo você vai descendo a página, aparece
    o botão para subir, e ele sobe suavemente.
    valeu pela dica champz!

  7. Victor Diehl 8 de agosto de 2011 20:37

    Olá!
    Desculpa, mas eu não entendi muito bem como implementar o script no meu blog/site, eu uso o blogger.. será que você poderia me explicar melhor pelo msn? victor__100@hotmail.com
    (meu e-mail tem 2 underlie)

    Valeu!

    • Robson Moulin 9 de agosto de 2011 8:49

      Ola, Victor

      Então não sei corretamente como é o funcionamento do blog, mais esses scripts devem ser implementados no código fonte do site, primeiro como diz no blog você deverá colocar o script que chama a biblioteca Jquery,

      no caso este

      este código deve estar dentro da tag acima do script

      $(document).ready(function() {

      $(‘#subir’).click(function(){

      $(‘html, body’).animate({scrollTop:0}, ‘slow’);

      return false;

      });

      });

      após isto basta implementar a id=”subir” dentro do seu como neste exemplo Este é o link para subir a página

      Espero que esclareça melhor, é simples não tem muito segredo são apenas esses passos mesmo.

      Abração

Deixe o seu comentário

Seu endereço de email não será publicado.

Você pode usar HTML tags e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>