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();