{"id":292,"date":"2016-09-14T07:26:52","date_gmt":"2016-09-14T10:26:52","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=292"},"modified":"2016-09-14T08:40:30","modified_gmt":"2016-09-14T11:40:30","slug":"scroll-suave-para-link-interno","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/scroll-suave-para-link-interno\/","title":{"rendered":"Scroll Suave para Link Interno"},"content":{"rendered":"<img decoding=\"async\" src=\"https:\/\/www.origamid.com\/codex\/wp-content\/uploads\/2016\/09\/scroll-suave.png\" alt=\"Scroll Suave para Link Interno\" \/>\n<p>A web \u00e9 um emaranhado de links. Um tipo de link muito comum \u00e9 a ancora, que seria um link interno. Basta adicionar ao href uma cerquilha (jogo da velha #) seguida por um nome \u00fanico ex: href=&#8221;#contato&#8221; e atribuir um id=&#8221;contato&#8221; ao elemento na p\u00e1gina.<\/p>\n<p>Assim ao clicar no link, o scroll automaticamente vai &#8220;pular&#8221; para onde est\u00e1 o elemento com o id.<\/p>\n<p>O objetivo desse tutorial \u00e9 mudarmos esse pulo, para um scroll suave. Isso garante que o usu\u00e1rio entenda o contexto em que ele est\u00e1, e em qual local na p\u00e1gina esse conte\u00fado se encontra.<\/p>\n<p data-height=\"380\" data-theme-id=\"24256\" data-slug-hash=\"XjXYjk\" data-default-tab=\"js,result\" data-user=\"origamid\" data-embed-version=\"2\" data-editable=\"true\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/origamid\/pen\/XjXYjk\/\">scroll-suave-link-interno<\/a> by Andr\u00e9 | Origamid (<a href=\"http:\/\/codepen.io\/origamid\">@origamid<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"\/\/assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Vamos usar JavaScript para isso, com a ajuda das fun\u00e7\u00f5es de jQuery para facilitar a escrita.<\/p>\n<p>A l\u00f3gica \u00e9 simples:<\/p>\n<ul>\n<li>1 &#8211; Identificar o momento em que o usu\u00e1rio clica no link<\/li>\n<li>2 &#8211; Verificar o valor de href do link e encontrar o elemento com este ID na p\u00e1gina<\/li>\n<li>3 &#8211; Calcular a dist\u00e2ncia entre o elemento e o topo da p\u00e1gina<\/li>\n<li>4 &#8211; Animar o scroll at\u00e9 o local do elemento<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">\n\n$('.nav a[href^=\"#\"]').on('click', function(e) {\n  e.preventDefault();\n  var id = $(this).attr('href'),\n  targetOffset = $(id).offset().top;\n    \n  $('html, body').animate({ \n    scrollTop: targetOffset - 100\n  }, 500);\n});\n\n<\/code><\/pre>\n<p>Agora vamos por partes:<\/p>\n<p>1 &#8211; Primeiro eu quero identificar o momento em que algu\u00e9m clica em um link que comece com #, assim eu posso criar no mesmo menu links internos e externos. Pois caso o link n\u00e3o comece com #, o seu comportamento ser\u00e1 padr\u00e3o.<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ o a[href^=\"#\"] seleciona apenas links com href=\"#\"\n\/\/ atribu\u00edmos a fun\u00e7\u00e3o on e passamos o par\u00e2metro click nela\n$('.nav a[href^=\"#\"]').on('click', function(e) {\n<\/code><\/pre>\n<p>2 &#8211; Agora eu preciso identificar o valor de href do link que eu cliquei<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ o preventDefault(); serve para prevenir que o link funcione da forma padr\u00e3o\n\/\/ que no caso seria \"pulando\" para o elemento com o id\ne.preventDefault();\n\n\/\/ crio um vari\u00e1vel id e coloco o valor do atributo (attr) href nela.\n\/\/ eu quero o valor referente ao link que eu cliquei, por isso o $(this)\nvar id = $(this).attr('href'),\n\n\/\/ crio outra vari\u00e1vel com o valor offset do elemento que possui id\n\/\/ com o mesmo valor do link. Esse offset \u00e9 a dist\u00e2ncia entre o elemento\n\/\/ e o topo da p\u00e1gina, por isso o offset().top\ntargetOffset = $(id).offset().top;\n<\/code><\/pre>\n<p>3 &#8211; Agora eu posso criar a anima\u00e7\u00e3o do scroll at\u00e9 o local do id, j\u00e1 que possuo a dist\u00e2ncia.<\/p>\n<pre><code class=\"language-javascript\">\n  \/\/ Seleciono os elementos html e body (por motivo de inconsist\u00eancia entre browsers)\n  \/\/ e atribuo a eles a fun\u00e7\u00e3o animate do CSS\n  $('html, body').animate({\n    \n    \/\/ eu quero animar o scrollTop com o valor do meu offset\n    \/\/ o - 100 serve para criar uma dist\u00e2ncia de 100px entre\n    \/\/ o destino e o topo da p\u00e1gina, assim o meu menu fixo n\u00e3o\n    \/\/ cobre o conte\u00fado ao final do scroll. Esse valor vai depender\n    \/\/ do tamanho do seu menu (e se voc\u00ea tem menu fixo ou n\u00e3o)\n    scrollTop: targetOffset - 100\n\n  \/\/ por \u00faltimo eu defino a velocidade da anima\u00e7\u00e3o, neste caso 500ms\n  }, 500);\n});\n<\/code><\/pre>\n<p>Voc\u00ea n\u00e3o precisa se limitar a anima\u00e7\u00e3o apenas, voc\u00ea pode por exemplo adicionar uma classe ativo ao item do menu, dependendo da \u00e1rea do site em que ele esteja.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A web \u00e9 um emaranhado de links. Um tipo de link muito comum \u00e9 a ancora, que seria um link interno. Basta adicionar ao href uma cerquilha (jogo da velha #) seguida por um nome \u00fanico ex: href=&#8221;#contato&#8221; e atribuir um id=&#8221;contato&#8221; ao elemento na p\u00e1gina. Assim ao clicar no link, o scroll automaticamente vai [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/292"}],"collection":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/comments?post=292"}],"version-history":[{"count":10,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/292\/revisions"}],"predecessor-version":[{"id":303,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/292\/revisions\/303"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=292"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=292"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}