Come aggiungere un link interno alla stessa pagina: Menu OnePage
Quando si scrivono contenuti molto lunghi o per altre ragioni, può presentarsi la necessità di creare un menu contenente link interni, che riportino a precise sezioni all’interno della stessa pagina web.
Inserire questo genere di ancore è molto semplice: per farlo bisogna ricorrere all’HTML oppure, se si utilizza WordPress, a specifici Plugin.
Inserire Link all’interno della stessa pagina in HTML
Per prima cosa individuiamo la sezione del contenuto da linkare, ad esempio un titolo h2 di uno specifico paragrafo e dunque inseriamo il tag <a> con la relativa istruzione:
<a name=”nomeancora”>Testo Ancora</a>Successivamente, nella parte superiore della pagina o ovunque vogliamo che sia mostrato il menu rapido o indice andimo ad inserire:
<a href=”#nomeancora”>Vai al Testo Ancora</a>In questo modo, molto semplice, otterremo un link che una volta cliccato condurrà alla parte selezionata della pagina.
Chiaramente in una sola pagina possono essere inserite diverse ancore, cambiando il nomeancora.
Aggiungere l’effetto scroll in JQuery
Se si vuole ottenere un effetto scroll e vedere la pagina scivolare fino alla sezione specifica, è possibile ricorrere a jQuery:
$(function() { $(‘a[href*=#]:not([href=#])’).click(function() { if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $(‘[name=’ + this.hash.slice(1) +’]’); if (target.length) { $(‘html,body’).animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });Se utilizzi WordPress puoi tranquillamente utilizzare il codice HTML visto in precedenza all’interno dell’editor, selezionando l’apposito tab Testo, per inserire il codice.
Se vuoi ottenere allo stesso modo l’effetto scroll descritto in precedenza, avrai bisogno di aggiungere qualche riga di codice al file functions.php del tuo tema o all’interno del plugin per inserire funzioni e personalizzazioni, appositamente creato per il tuo sito o blog.
Il codice è il seguente:
add_action(‘wp_head’,’smoothscroll’);
function smoothscroll() { print(“<script>jQuery(function() { jQuery.easing.myEasing = function (x, t, b, c, d) { return (t==d) ? b+c : c * (-Math.pow(2, -12 * t/d) + 1) + b; } jQuery(‘a[href*=#]:not([href=#])’).click(function() { if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) { var target = jQuery(this.hash); target = target.length ? target : jQuery(‘[name=’ + this.hash.slice(1) +’]’); if (target.length) { jQuery(‘html,body’).animate({ scrollTop: target.offset().top }, 1000,’myEasing’); return false; } } }); });</script>”);
}
Plugin Table of Contents per WordPress
Con WordPress puoi anche utilizzare dei plugin. Se fai una ricerca sul repository ufficiale trovi infatti molti plugin che ti aiutano nel creare una Tabella o Indice dei Contenuti.
Su questo sito ed in tanti altri gira a dovere TOC+, Plugin che consente l’inserimento automatizzato o manuale di indici del contenuto, inserendo l’ancora ad ogni sotto-testata, ad ogni heading tag.
Conclusioni
Le ancore interne, i link all’interno della stessa pagina possono essere molto utili, specie se si creano contenuti molto lunghi: se un utente è interessato a qualcosa di specifico potrà arrivarci in tutta semplicità, senza perdersi tra le parole del contenuto.
Anche Google legge ed apprezza questo genere di link, mostrandoli com link Jump To direttamente in SERP.
Se hai domande, considerazioni o t va semplicemente di dire la tua, non esitare a lasciare un commento: come sempre riceverai presto una risposta.