Advertisement
Hisabeel

How to get a button for "scroll to top"?

Sep 27th, 2017
182
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.24 KB | None | 0 0
  1. Um botão de volta ao topo é exatamente o que parece - o botão que o leva de volta ao topo de uma página. Isso é feito com um link.
  2. O link pode ser um link direto que salta diretamente para o topo, ou você pode usar o script para se deslocar para o topo. Ambos serão explicados, isso pode não funcionar com todos os temas, dependendo de outros scripts, cursores, etc., que também podem ser instalados no seu blog.
  3.  
  4. 1. Link básico
  5.     <a href="#top">voltar ao topo</a>
  6.  
  7. O # significa que é um link dentro da mesma página, portanto não irá atualizar a página, mas sim saltar para o topo da página. Este código pode ser colocado na sua descrição. Se você deseja um link personalizado, defina #top como o link.
  8.  
  9.  
  10. 2. Adicionando um script
  11. Para colocar o código no seu blog, procure </style> e, depois, coloque:
  12.     <script type="text/javascript" src="URL VEM AQUI"></script>
  13.  
  14.  
  15. 3. Fazendo do código parte do seu blog
  16. Se você tem um bom conhecimento de html e css, e quer ter um link no canto do seu blog, então coloque este código no seu lado direito antes de </body>:
  17.     <a style="position:fixed; bottom:10px; right:10px"href="#top">voltar ao topo</a>
  18.  
  19. Você pode mudar de baixo para cima, ou da esquerda para a direita, ou colocá-lo no css. Não precisa ser texto, também pode ser uma imagem:
  20.     <a style="position:fixed; bottom:10px; right:10px"href="#top"><img src="IMAGE URL"></a>
  21.  
  22. Você pode encontrar imagens para o botão neste site (http://thetutorialsblog.tumblr.com/post/46460124514/scroll-to-top-buttons). (:
  23. E é isso! Se você tiver alguma dúvida não hesite em perguntar.
  24.  
  25.  
  26. x ----------------------------------------------------------------------------------------------------------------------------------- x
  27.  
  28.  
  29. A back to top button is exactly what it sounds like - a button that takes you back to the top of a page. This is done with a link.
  30. The link can either be a direct link that jumps directly to the top, or you can use a script to scroll back to the top. Both will be explained in this may not work with all themes, depending on other scripts, cursors, etc, that may be also installed on your blog.
  31.  
  32. 1. Basic link
  33.     <a href=“#top>back to top</a>
  34.  
  35. The # means that it’s a link within the same page, so it won’t refresh the page, but just jump to the top of the page. This code can be put in your description. If you want a custom link, set #top as the link.
  36.  
  37.  
  38. 2. Adding a script
  39. To put the code in your blog, look for </style>, and then after it put:
  40.     <script type=text/javascript” src=“URL GOES HERE”></script>
  41.  
  42.  
  43. 3. Making the code part of your blog
  44. If you have a fairly good knowledge of html and css, and want to have link in the corner of your blog, then put this code in your html right before </body>:
  45.     <a style=position:fixed; bottom:10px; right:10px” href=“#top>back to top</a>
  46.  
  47. You can change bottom to top, or left to right, or put it into css. It doesn’t have to be text, it can also be an image:
  48.     <a style=position:fixed; bottom:10px; right:10px” href=“#top><img src=“IMAGEURL”></a>
  49.  
  50. You can find images for the button on this site (http://thetutorialsblog.tumblr.com/post/46460124514/scroll-to-top-buttons). (:
  51. And that’s it! If you have any questions, feel free to ask.
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement