Arreglando enlaces vacíos

Hace unos meses, estaba trabajando en la web usando Shaka Theme de Protheus Themes. El tema tiene un shortcode que genera botones, nada nuevo. Lo nuevo es que ese shortcode tiene un parámetro para generar un botón con una forma irregular, muy molona, si. Además (si, hay más), tiene otro parámetro para convertir el botón en título, para poder aprovechar la forma irregular con títulos call to action.

El problema: vacío, pero no el vacío correcto

Cuando usaba el shortcode como título, se seguía generando una etiqueta <a>. Al no tener URL, el <a> se generaba vacío, pero no de forma correcta. Se generaba una etiqueta con el párametro href=»#». Ya te lo puedes imaginar, cada vez que se clica en uno de estos títulos, el scroll sube hasta arriba. Para que no pase esto, se suele poner el valor href=»javascript:void(0)», pero no iba a modificar el tema para eso ¿no?

La solución: reemplazar todos los enlaces con javascript

Aquí dejo el codepen.

Enjoy.