Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a Javascript que contiene a SliceAnchor: Crear un ancla sin necesidad de enlace con Jquery

Datos de búsqueda

SliceAnchor: Crear un ancla sin necesidad de enlace con Jquery

En las ocasiones en las que se está utilizando el hash en la url del navegador utilizar un enlace como ancla puede ser algo un poco conflictivo (ya que al utilizarlo cambiaría el hash). Es algo muy típico de aplicaciones que en lugar de recargar la página van pidiendo datos al servidor y recargando las partes que sean necesarias (single page interface).

Con el siguiente script se podría solucionar ese problema:

$.fn.extend({
  sliceAnchor: function (data) {
    var defaults = {
      attrSelector: 'data-navigate-anchor',
      animationTime: 50
    },
      options = $.extend(true, defaults, data),
      navigateAnchor = function (event) {
        var destinationSelector = $(event.currentTarget).attr(options.attrSelector),
          $destination = $(destinationSelector);
        $('html, body').animate({
          scrollTop: $destination.offset().top
        }, options.animationTime, function () {
          $destination.focus();
        });
      };
    return this.each(function () {
      $(this).on('click.navigateAnchor', navigateAnchor);
    });
  }
});

Habría que crear un elemento (preferiblemente con rol de enlace) que al clicarlo lleve al destino:

<span role="link" tabindex="0" data-navigate-anchor="#destination-element">Navegar al elemento de destino</span>

Y le aplicamos el método sliceAnchor:

$('[data-navigate-anchor]').sliceAnchor();

Descargar SliceAnchor en Gist

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Los comentarios están cerrados.

Información del sitio