SmoothScroll.js su blogger: un tocco di grazia in più agli ancoraggi

Nessun commento:
 
Può capitare di dover scrivere dei post molto lunghi, oppure di voler realizzare per motivi di semplicità un sito web composto solo da una pagina, e poi consentire la navigazione all’interno del testo con gli ancoraggi.

Questo metodo funziona bene quando i testi sono molto lunghi e non si vuole costringere il lettore a fare troppo scroll con la rotellina del mouse. Tuttavia lo scroll automatico della pagina generato dagli ancoraggi risulta sempre abbastanza brutale: cliccando su un link del menu ci si ritrova istantaneamente a metà della pagina, e se non si hanno punti di riferimento, si corre il rischio di creare confusione al visitatore.

Con SmoothScroll (un piccolo javascript, molto diffuso nei blog di wordpress) gli ancoraggi diventano più fluidi, e la pagina scorre in maniera più gradevole sotto gli occhi del lettore.

Date un’occhiata a questa pagina: http://smoothscroll.blogspot.com/

E’ possibile inserire questo javascript anche in un template di blogger, la procedura è semplicissima, e ci permette di realizzare delle pagine che hanno un tocco in più di originalità.

Vediamo come inserire il javascript nel template.



1. Scaricare SmoothScroll.js


Prima di tutto, dobbiamo scaricare SmoothScroll.js da questo sito:

http://www.dezinerfolio.com/2007/08/08/df-javascript-smooth-scroll

(da cui ho tratto ispirazione per questo post), dopodiché dobbiamo farne l’upload sul nostro dominio, o su un servizio di archiviazione online gratuito.


2. Inserire il codice nel template


Dal pannello di controllo del blog, andiamo alla scheda “Layout”, alla voce “Modifica HTML” e cerchiamo queste righe:

<head>
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
  <b:skin><![CDATA[/*

ora aggiungiamo questa stringa di codice (che io ho evidenziato in giallo):

<head>
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
  <script src='http://www.angeloferretti.com/js/smooth.pack.js' type='text/javascript'/>
  <b:skin><![CDATA[/*


Sostituendo alla parte sottolineata, l’indirizzo del nostro javascript.

Da questo momento in poi, basterà inserire un ancoraggio con il metodo classico , e SmoothScroll farà il resto.

Nessun commento:

Posta un commento

 
© 2016 LUCYDREAMS - Tutti i diritti riservati - P.IVA 13151341008 | Template Designed by Main-Blogger.