jQuery: creare link 'torna su' (back to top)

Creare automaticamente link che riportino il lettore nella parte superiore o principale del contenuto di una pagina è un compito che jQuery svolge agevolmente. La parte più interessante dell'esempio che vi mostrerò riguarda come jQuery riesca a manipolare al volo la struttura DOM di una pagina trasformandola esattamente in ciò che vogliamo. Vediamo in dettaglio l'esempio.

Abbiamo una pagina con una struttura HTML di questo tipo:


<div id="content">

  <h2>...</h2>
  
  <!-- serie di paragrafi -->
  
  <h2>....</h2>
  
  <!-- serie di paragrafi -->
  
  <!-- si ripete -->

</div>

I delimitatori di ciascuna sezione al cui termine andrà inserito il link 'Torna su' sono le intestazioni h2. Quindi, dato che le intestazioni e i paragrafi che seguono (o altro tipo di contenuto) formano un blocco logico a sè stante, dobbiamo trasformare la precedente struttura in questa che segue:


<div id="content">

 <div class="section">

  <h2>...</h2>
  
  <!-- serie di paragrafi -->
 </div>
 
 <div class="section">  
  <h2>....</h2>
  
  <!-- serie di paragrafi -->
 </div>
  
  <!-- si ripete -->

</div>

Come si può notare, ciascuna sezione va da un elemento h2 al successivo, quindi possiamo usare il metodo nextUntil() combinato con il metodo wrapAll() (perchè gli elementi da racchiudere sono più d'uno. Una volta create le sezioni dobbiamo solo aggiungere il link alla fine di esse:


$(document).ready(function() {

  var link = '<div class="top">' +
             '<a href="#content">' +
             'Torna su ' + '</a>' +
             '</div>';
  
  $('#content h2').each(function() {
  
    var $h2 = $(this);
    
    $h2.nextUntil('h2').wrapAll('<div class="section"></div>'); 
  
  });
  
  $('div.section').each(function() {
  
    var $section = $(this);
    
    $(link).appendTo($section);
  
  });
    
});

Potete visionare l'esempio finale su questa pagina.

Torna su