{"id":6052,"date":"2013-08-08T19:06:34","date_gmt":"2013-08-08T19:06:34","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6052"},"modified":"2014-11-09T20:34:41","modified_gmt":"2014-11-09T20:34:41","slug":"anclas-con-efecto-slide-con-jquery","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/anclas-con-efecto-slide-con-jquery\/","title":{"rendered":"Anclas con efecto slide con jQuery"},"content":{"rendered":"

En este art\u00edculo vamos\u00a0 a ver como crear un men\u00fa de anclas con efecto slide empleando para ello jQuery.<\/p>\n

Crear un link con una ancla es muy sencillo, tan solo tienes que a\u00f1adir un link hacia un identificador de la siguiente forma:<\/p>\n

<a href=\"#titulo1\">Titulo 1<\/a><\/pre>\n
Al hacer click en este link iremos directamente a donde est\u00e9 situado este identificador en la p\u00e1gina.<\/p>\n
El objetivo de este art\u00edculo es mejorar el efecto de scroll hacia estas anclas empleando para ello jQuery y un plugin stickymojo<\/a> para mantener el men\u00fa de enlaces siempre visible.<\/p>\n
En el ejemplo que vamos a ilustrar vamos a tener una columna izquierda donde vamos a tener el men\u00fa de enlaces hacia las anclas y un bloque de contenido a la derecha donde estar\u00e1n las anclas.<\/p>\n
El men\u00fa lo crearemos de la siguiente forma:<\/p>\n
<ul>\r\n\u00a0\u00a0 \u00a0<li><a href=\"#titulo1\" class=\"ancla\">Titulo 1<\/a><\/li>\r\n\u00a0\u00a0 \u00a0<li><a href=\"#titulo2\" class=\"ancla\">Titulo 2<\/a><\/li>\r\n\u00a0\u00a0 \u00a0<li><a href=\"#titulo3\" class=\"ancla\">Titulo 3<\/a><\/li>\r\n<\/ul><\/pre>\n
F\u00edjate que son links con anclas con una clase.<\/p>\n
En el contenido tendremos los identificadores, como por ejemplo:<\/p>\n
<h1 id=\"titulo1\">Titulo 1<\/h1><\/pre>\n
Vale, ahora solo falta ver la clave del asunto. El c\u00f3digo jQuery que deberemos incluir en la cabecera de la p\u00e1gina:<\/p>\n
<script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/jquery-latest.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"js\/stickyMojo.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n$(document).ready(function() {\u00a0\u00a0 \u00a0\r\n\r\n\u00a0\u00a0 \u00a0$('#sidebar').stickyMojo({footerID: '#footer', contentID: '#content'});\r\n\r\n\u00a0\u00a0 \u00a0$('.ancla').click(function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var link = $(this);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var anchor\u00a0 = link.attr('href');\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$('html, body').stop().animate({\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0scrollTop: jQuery(anchor).offset().top\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}, 2000);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return false;\r\n\u00a0\u00a0 \u00a0});\r\n});\r\n<\/script><\/pre>\n
Estamos incluyendo la librer\u00eda jQuery, el plugin stickymojo, la llamada al plugin y el c\u00f3digo necesario para aplicar el efecto slide durante el scroll hacia el identificador de la ancla.<\/p>\n
Al plugin de stickymojo le estamos pasando 2 par\u00e1metros. En el primer par\u00e1metros estamos indicando hasta donde queremos que se mueva el men\u00fa de la columna izquierda y en el segundo par\u00e1mentro identificamos el contenedor de referencia.<\/p>\n
El c\u00f3digo que se ejecuta al pulsar uno de los links del men\u00fa es lo que va a continuaci\u00f3n. Por cada ancla que sea clickeada vamos a coger su link, es decir, el identificador a donde queremos llegar y utilizando la funci\u00f3n animate de jQuery aplicamos un efecto de scroll slide de 2 segundos.<\/p>\n
Ver ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
En este art\u00edculo vamos\u00a0 a ver como crear un men\u00fa de anclas con efecto slide empleando para ello jQuery. Crear un link con una ancla es muy sencillo, tan solo tienes que a\u00f1adir un link hacia un identificador de la siguiente forma: <a href=\u00bb#titulo1″>Titulo 1<\/a> Al hacer click en este link iremos directamente a donde […]<\/p>\n","protected":false},"author":1,"featured_media":5459,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[167,44,60],"class_list":["post-6052","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-eventos","tag-menus","tag-scroll"],"yoast_head":"\nAnclas con efecto slide con jQuery - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Anclas con efecto slide con jQuery - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo vamos\u00a0 a ver como crear un men\u00fa de anclas con efecto slide empleando para ello jQuery. Crear un link con una ancla es muy sencillo, tan solo tienes que a\u00f1adir un link hacia un identificador de la siguiente forma: <a href="#titulo1">Titulo 1<\/a> Al hacer click en este link iremos directamente a donde […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/anclas-con-efecto-slide-con-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2013-08-08T19:06:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-11-09T20:34:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"200\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/anclas-con-efecto-slide-con-jquery\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/anclas-con-efecto-slide-con-jquery\/\",\"name\":\"Anclas con efecto slide con jQuery - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/anclas-con-efecto-slide-con-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/anclas-con-efecto-slide-con-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png\",\"datePublished\":\"2013-08-08T19:06:34+00:00\",\"dateModified\":\"2014-11-09T20:34:41+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/anclas-con-efecto-slide-con-jquery\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/anclas-con-efecto-slide-con-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/anclas-con-efecto-slide-con-jquery\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png\",\"width\":200,\"height\":200},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/anclas-con-efecto-slide-con-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Anclas con efecto slide con jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Anclas con efecto slide con jQuery - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Anclas con efecto slide con jQuery - Jose Aguilar Blog","og_description":"En este art\u00edculo vamos\u00a0 a ver como crear un men\u00fa de anclas con efecto slide empleando para ello jQuery. Crear un link con una ancla es muy sencillo, tan solo tienes que a\u00f1adir un link hacia un identificador de la siguiente forma: <a href=\"#titulo1\">Titulo 1<\/a> Al hacer click en este link iremos directamente a donde […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/anclas-con-efecto-slide-con-jquery\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2013-08-08T19:06:34+00:00","article_modified_time":"2014-11-09T20:34:41+00:00","og_image":[{"width":200,"height":200,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/anclas-con-efecto-slide-con-jquery\/","url":"https:\/\/www.jose-aguilar.com\/blog\/anclas-con-efecto-slide-con-jquery\/","name":"Anclas con efecto slide con jQuery - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/anclas-con-efecto-slide-con-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/anclas-con-efecto-slide-con-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png","datePublished":"2013-08-08T19:06:34+00:00","dateModified":"2014-11-09T20:34:41+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/anclas-con-efecto-slide-con-jquery\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/anclas-con-efecto-slide-con-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/anclas-con-efecto-slide-con-jquery\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png","width":200,"height":200},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/anclas-con-efecto-slide-con-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Anclas con efecto slide con jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6052","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=6052"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6052\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/5459"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}