Logotipo Design Interativo
JavaScript

JavaScript para Subir a Página ao Topo Suavemente


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.




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



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



 

Comentários
  1. Alexandre disse:

    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 disse:

    Funcionou !
    Me salvou por aqui.
    Parabéns!

  3. Pedro Henrique disse:

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

  4. Felipe disse:

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

  5. welliton disse:

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

  6. @Ka_not disse:

    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 disse:

    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 disse:

      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!

publicidade
publicidade
publicidade

Design Tools

Links

Conheça sites sobre ux, design, front-end, comunicação, inspiração e muito mais, fique por dentro das novidades do mercado com nossa lista.


Profissionais Influentes

Conheça os profissionais que influenciam e trabalham para a comunidade de design e fron-end e user experience, confira o Twitter de cada um.


Curta nossa fanpage e fique por dentro das novidades do site
publicidade
publicidade
publicidade