Usare le ancore html con il tag “base”

L’articolo di oggi si rivela molto utile per chi usa CMS che hanno il tag <base> per il funzionamento del sito web. Ciò comporta un inconveniente con le ancore html (esempio <a href=”#sezione”>vai a sezione</a>), dato che non prenderanno più come riferimento la pagina stessa, bensì il path dichiarato dal <base>.

Per risolvere questo problema si può ricorrere ai link assoluti (quindi <a href=”http://percorso/pagina.html#sezione”>vai a sezione</a>), ma questa è una soluzione difettosa, perché il browser potrebbe fare un refresh inutile della pagina. Inoltre, usando un CMS, i link assoluti potrebbero risultare poco pratici.

Una soluzione elegante l’ho trovata usando JQuery, e precisamente con la funzione scrollTop(). Essa permette di creare l’effetto “smooth scroll”, le ancore inizieranno a spostare la pagina al punto desiderato, con un movimento delicato, ignorando quindi il comportamento predefinito ed il tag <base>.

Nel mio caso specifico avevo però un altro problema da risolvere, le ancore erano presenti sia in un menu orizzontale, sia in un menu generato al volo per la versione mobile. Poi, avevo altre funzioni che ricorrono alle ancore (slideshow, bottone di apertura del menu mobile) e non potevo assegnare l’azione “smooth scroll” a tutti i link della pagina, ma solo esclusivamente ai miei due menu. Il codice a cui sono giunto è quello seguente.

$(document).on('click', '#navigation a, #jPanelMenu-menu a', function() {
    var link = $(this).attr('href');
    if (link.substr(0, 1) == "#") {
        $('html, body').animate({
            scrollTop : $($.attr(this, 'href')).offset().top - 70
        }, 500);
        return false;
    }
});

La funzione on(), serve a far funzionare sia gli elementi statici, presenti nella pagina al caricamento di essa, sia gli elementi generati al volo. Gli elementi <a> possono essere vari, quindi restringo l’azione ai link dei miei due menu: “#navigation a” è quello orizzontale e statico, mentre “#jPanelMenu-menu a” è quello mobile, che si crea quando la pagina è a dimensioni ridotte.

Poi istanzio una variabile “link” perché voglio fare un controllo sull’elemento <a>: chiedo se l’attributo “href” ha il cancelletto per sapere se è un’ancora. Se affermativo, procedo con la funzione scrollTop, che è animata per 500 millisecondi.
Il punto di arrivo non è un numero che conosco già, ma è determinato dall’elemento indicato dal link stesso, cioè “$.attr(this, ‘href’)“, il valore da prendere è al punto superiore di quell’elemento, quindi “.offset().top“. Inoltre ho voluto spostarlo di 70 pixel verso il basso (quindi -70), perchè il mio menu orizzontale è “sticky” e rimane sulla pagina occupando uno spazio pari a 70 pixel.

Così si conclude la spiegazione di questo piccolo ma utile script.