{"id":4429,"date":"2024-11-04T17:53:57","date_gmt":"2024-11-04T17:53:57","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&#038;p=4429"},"modified":"2025-01-27T12:08:28","modified_gmt":"2025-01-27T12:08:28","slug":"o-que-e-um-botao-voltar-ao-topo","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-um-botao-voltar-ao-topo\/","title":{"rendered":"O que \u00e9 um bot\u00e3o \"Voltar para o topo\"?"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>\u00cdndice<\/h2><nav><ul><li><a href=\"#why-use-a-back-to-top-button\">Por que usar um bot\u00e3o \"voltar para o topo\"?<\/a><\/li><li><a href=\"#what-are-the-best-practices-for-designing-and-implementing-a-back-to-top-button\">Quais s\u00e3o as pr\u00e1ticas recomendadas para projetar e implementar um bot\u00e3o \"voltar para o topo\"?<\/a><\/li><li><a href=\"#are-there-any-accessibility-considerations-for-back-to-top-buttons\">Existem considera\u00e7\u00f5es de acessibilidade para bot\u00f5es \"voltar para o topo\"?<\/a><\/li><li><a href=\"#conclusion\">Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-use-a-back-to-top-button\">Por que usar um bot\u00e3o \"voltar para o topo\"?<\/h2>\n\n\n\n<p>Os bot\u00f5es \"voltar ao topo\" s\u00e3o importantes para simplificar a navega\u00e7\u00e3o at\u00e9 o topo de p\u00e1ginas mais longas. Com este bot\u00e3o, os usu\u00e1rios podem clicar uma vez para retornar ao topo, em vez de rolar. Embora \u00fatil em desktops, <a href=\"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-responsividade-movel\/\" data-type=\"link\" data-id=\"https:\/\/hocoos.com\/answers\/what-is-mobile-responsiveness\/\">sites otimizados para celular<\/a> tamb\u00e9m devem incluir bot\u00f5es \"voltar ao topo\"; a rolagem \u00e9 diferente em ambos.&nbsp;<\/p>\n\n\n\n<p>Ao usar os bot\u00f5es \"voltar ao topo\", os usu\u00e1rios podem navegar pelo conte\u00fado sem rolar. Isso vale para p\u00e1ginas iniciais e p\u00e1ginas de produtos, mas voc\u00ea tamb\u00e9m deve considerar adicion\u00e1-los a artigos.&nbsp;<\/p>\n\n\n\n<p>Considere o seguinte ao adicionar bot\u00f5es \"voltar ao topo\" \u00e0 sua p\u00e1gina da web:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use uma seta para cima ou outra dica visual semelhante para que o usu\u00e1rio saiba o que o bot\u00e3o faz.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Embora o bot\u00e3o deva ser de f\u00e1cil acesso, voc\u00ea tamb\u00e9m deve torn\u00e1-lo discreto para que seu outro conte\u00fado seja exibido com mais destaque.&nbsp;<\/li>\n<\/ul>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nUm mergulho profundo: \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nSaber com que frequ\u00eancia um bot\u00e3o \u00e9 clicado \u00e9 essencial se voc\u00ea quiser colocar o bot\u00e3o \"voltar ao topo\" em um local mais eficaz em sua p\u00e1gina. Use um software de an\u00e1lise para determinar o comportamento do usu\u00e1rio e se voc\u00ea precisa mov\u00ea-lo para outro lugar.\u00a0\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-the-best-practices-for-designing-and-implementing-a-back-to-top-button\">Quais s\u00e3o as pr\u00e1ticas recomendadas para projetar e implementar um bot\u00e3o \"voltar para o topo\"?<\/h2>\n\n\n\n<p>Tenha cada uma das seguintes \u00e1reas em mente para maximizar a efic\u00e1cia do seu bot\u00e3o \"voltar ao topo\":&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Visibilidade:<\/strong> Precisa ser f\u00e1cil de ver, mas n\u00e3o distrair o usu\u00e1rio.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Posicionamento:<\/strong> Considere seu <a href=\"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-um-layout-de-design-de-website\/\" data-type=\"link\" data-id=\"https:\/\/hocoos.com\/answers\/what-is-a-website-design-layout\/\">layout do site<\/a> ao colocar seu bot\u00e3o \"voltar ao topo\". Embora o canto inferior direito seja comum, voc\u00ea deve tentar locais diferentes.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tamanho\/Formato:<\/strong> Use um \u00edcone que os usu\u00e1rios reconhecer\u00e3o instantaneamente e limite o espa\u00e7o que o bot\u00e3o consome.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Rolagem:<\/strong> A rolagem suave e lenta deve ser sua prioridade.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Cada uma dessas \u00e1reas contribui igualmente para a experi\u00eancia do usu\u00e1rio e a acessibilidade do seu site.&nbsp;<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\n\u2022 Teste o seu bot\u00e3o \"voltar ao topo\" em smartphones, tablets e computadores. Pode ser necess\u00e1rio escolher diferentes guias no seu construtor de sites para personalizar cada um deles.<br\/><br\/>\n\u2022 Fa\u00e7a testes A\/B com diferentes posi\u00e7\u00f5es e \u00edcones para determinar as prefer\u00eancias do seu p\u00fablico.\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"are-there-any-accessibility-considerations-for-back-to-top-buttons\">Existem considera\u00e7\u00f5es de acessibilidade para bot\u00f5es \"voltar para o topo\"?<\/h2>\n\n\n\n<p>Sim. Voc\u00ea deve considerar v\u00e1rios aspetos de acessibilidade ao projetar bot\u00f5es de \"voltar ao topo\". Mais especificamente, voc\u00ea deve pensar em cada um dos seguintes itens:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Contraste de cores: <\/strong>Precisa haver contraste suficiente entre o bot\u00e3o e o fundo para que usu\u00e1rios com defici\u00eancia visual possam acess\u00e1-lo facilmente.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Acessibilidade do teclado: <\/strong>Alguns utilizadores n\u00e3o conseguem usar um rato ou trackpad; portanto, certifique-se de que eles podem usar o mesmo recurso com o teclado.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Estado de foco: Quando<\/strong> o bot\u00e3o for usado num teclado, forne\u00e7a feedback visual evidente.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>Implemente um aspeto de cada vez e fa\u00e7a testes A\/B para garantir que voc\u00ea atendeu a todos os utilizadores.&nbsp;<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\n\u2022 Atributos ARIA, como aria-label, s\u00e3o importantes para fornecer contexto extra em leitores de tela. Estes s\u00e3o frequentemente usados por pessoas com defici\u00eancia visual, por isso, torne-os uma prioridade.<br\/><br\/>\n\u2022 Use as Diretrizes de Acessibilidade para Conte\u00fado Web (WCAG) para determinar o qu\u00e3o acess\u00edveis s\u00e3o seus bot\u00f5es \"voltar ao topo\".\u00a0\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclus\u00e3o<\/h2>\n\n\n\n<p>Embora seja f\u00e1cil subestimar o bot\u00e3o \"voltar ao topo\", ele \u00e9 uma parte importante de <a href=\"https:\/\/hocoos.com\/pt\/respostas\/por-que-a-boa-navegacao-do-site-importa\/\" data-type=\"link\" data-id=\"https:\/\/hocoos.com\/answers\/why-does-good-website-navigation-matter\/\">navega\u00e7\u00e3o do site<\/a>. Voc\u00ea pode us\u00e1-los com diferentes <a href=\"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-um-tema-de-construtor-de-sites\/\" data-type=\"link\" data-id=\"https:\/\/hocoos.com\/answers\/what-is-a-website-builder-theme\/\">temas de sites<\/a>.<\/p>\n\n\n\n<p>Ao implementar bot\u00f5es \"voltar ao topo\", voc\u00ea deve considerar diferentes aspectos de acessibilidade (por exemplo, contraste e uso do teclado). Ele tamb\u00e9m precisa se adequar \u00e0 est\u00e9tica do seu site e ter um \u00edcone reconhec\u00edvel. Teste diferentes bot\u00f5es e posi\u00e7\u00f5es para ver quais funcionam com seu p\u00fablico.<\/p>","protected":false},"excerpt":{"rendered":"<p>Why use a back-to-top button? Back-to-top buttons are important for simplifying navigation to the top of lengthier pages. With this button, users can click once to return to the top\u2014as opposed to scrolling. While useful on desktop devices, mobile-optimized sites should also include back-to-top buttons; scrolling is different on both.&nbsp; When using back-to-top buttons, users [&hellip;]<\/p>","protected":false},"author":39,"featured_media":4430,"template":"","answers_category":[28],"class_list":["post-4429","answer","type-answer","status-publish","has-post-thumbnail","hentry","answers_category-website-design"],"acf":{"image":null,"card_image":4430,"content":[{"acf_fc_layout":"header_section","title":"O que \u00e9 um bot\u00e3o \"Voltar para o topo\"?","descriptions":"Back-to-top buttons are small webpage buttons. These could be arrow icons or text specifying that it\u2019s a back-to-top button; it depends on the website.\r\n\r\nYou\u2019ll use back-to-top buttons to allow users to go back to the top of a webpage with one click. Besides coding and plugins, some themes have back-to-top buttons.","tip_label":"","tip":"","additional_tips":null,"key_takeaways_label":"Key Takeaways:","key_takeaways":[{"label":"Scrolling capabilities","body":"With back-to-top buttons, users can jump back to the top of the page."},{"label":"Setup","body":"You can add back-to-top buttons via code, themes, or plugins."},{"label":"Accessibility","body":"Consider color contrasts and how a user would navigate via their keyboard."}]}]},"_links":{"self":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer\/4429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer"}],"about":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/types\/answer"}],"author":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/users\/39"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media\/4430"}],"wp:attachment":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media?parent=4429"}],"wp:term":[{"taxonomy":"answers_category","embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answers_category?post=4429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}