Evitare che la pagina scrolli “on top” su hashed link [PILLOLA]

Quante volte ci capita di utilizzare link “fasulli” nelle pagine, solo per avviare un trigger js o qualcosa di simile?
Come si fa generalmente?

<a href="javascript:void(0);">Link Trigger</a>

Oppure

<a href="#">Link Trigger</a>

Giusto?
Ma cosa succede in questi casi?
Nel primo, potrebbe capitare che la funzione js da lanciare non abbia l’effetto desiderato, nel secondo la pagina schizza on top, cioè scrolla automaticamente all’inizio.

Qualche workaround per aggirare il problema

Di default i link ad un hash (#) sono l’equivalente di un link con target settato a “_top”, o nel caso in cui al seguito dell’hash vi è un identificativo ad un hancor, la pagina scrolla fino a trovare l’hancor richiesto.
Detto questo:

<a href="#ID_FASULLO">Link Trigger</a>

Oppure

<a href="#_">Link Trigger</a>

Diranno alla pagina di scrollare verso un id che effettivamente non esiste, quindi la pagina non scrolla e rimane dove si trova.
Una soluzione ancora più elegante per chi utilizza jQuery potrebbe essere questa:

( function($) {
    $('a[href="#"]').click(function(e) {
        e.preventDefault();
    });
} )(jQuery);

In questo modo jQuery si occuperà di annullare il normale evento e.preventDefault() che si sarebbe scatenato all’onClick di ogni link ‘a[href=”#”]’ avente come destinazione href un #.

Spero sia stato utile.
Se conosci altri sistemi e vuoi suggerirli, utilizza la sezione commenti che trovi qui sotto.
Grazie!

%d blogger hanno fatto clic su Mi Piace per questo: