{"id":3644,"date":"2018-11-01T12:15:44","date_gmt":"2018-11-01T12:15:44","guid":{"rendered":"https:\/\/www.templatemonster.com\/it\/blog\/?p=3644"},"modified":"2018-11-01T12:16:37","modified_gmt":"2018-11-01T12:16:37","slug":"pulsante-torna-allinizio-con-css-e-jquery","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/","title":{"rendered":"Creazione di un pulsante Torna all’inizio con CSS e jQuery"},"content":{"rendered":"

Un pulsante Torna all'inizio \u00e8 qualcosa che molti di voi probabilmente hanno visto su molti siti web. \u00c8 quella freccia che appare nell'angolo in basso a destra di una pagina web quando inizi a scorrere. Quando si fai clic su questo pulsante, ti riporta in cima alla pagina.<\/p>\n

Se vuoi aggiungere un pulsante Torna all'inizio mentre stai ancora progettando un sito web<\/a>, o sei semplicemente curioso di sapere come crearne uno da solo, benvenuto a bordo!<\/p>\n

\n
<\/div>\n

Ritorno al\u00a0<\/span><\/span>Futuro\u00a0<\/span>in alto<\/strong><\/h2>\n

Il nostro codice consisterebbe in due parti, lo stile CSS e un piccolo script jQuery. Iniziamo con i CSS.<\/p>\n

\n
<\/div>\n

Stili CSS per il pulsante<\/strong><\/h3>\n

Iniziamo creando stili e markup per il nostro pulsante. Ecco la parte HTML:<\/p>\n

<link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.5.0\/css\/font-awesome.min.css\"<\/span>><\/span>\r\n\r\n<a<\/span> id<\/span>=\"button\"<\/span>><\/a<\/span>><\/span>\r\n\r\n<\/pre>\n
Il pulsante consisterebbe in un singolo<\/span> tag di ancoraggio con un pulsante id. Includiamo anche un link alla libreria FontAwesome in modo che possiamo usare un'icona per il nostro pulsante.<\/p>\n
Gli stili iniziali per il pulsante sarebbero simili a questo:<\/p>\n
#button<\/span> {\r\n  display<\/span>: inline-block<\/span>;\r\n  background-color<\/span>: #FF9800<\/span>;\r\n  width<\/span>: 50px<\/span><\/span>;\r\n  height<\/span>: 50px<\/span><\/span>;\r\n  text-align<\/span>: center<\/span>;\r\n  border-radius<\/span>: 4px<\/span><\/span>;\r\n  margin<\/span>: 30px<\/span><\/span>;\r\n  position<\/span>: fixed<\/span>;\r\n  bottom<\/span>: 30px<\/span><\/span>;\r\n  right<\/span>: 30px<\/span><\/span>;\r\n  transition: background-color .3s<\/span><\/span>;\r\n  z-index<\/span>: 1000<\/span>;\r\n}\r\n#button<\/span>:hover<\/span> {\r\n  cursor<\/span>: pointer<\/span>;\r\n  background-color<\/span>: #333<\/span>;\r\n}\r\n#button<\/span>:active<\/span> {\r\n  background-color<\/span>: #555<\/span>;\r\n}\r\n\r\n<\/pre>\n
Poich\u00e9 il pulsante \u00e8 un elemento di ancoraggio e gli ancoraggi di default sono elementi in linea, \u00e8 necessario modificare la propriet\u00e0 di visualizzazione per i<\/span> blocco in linea, in modo da poter assegnare le quote ad esso.<\/p>\n
Facciamo un pulsante quadrato di 50 * 50 px con gli <\/span>angoli arrotondati di 4 px. Gli daremo un colore arancione brillante e un margine di 30 px su ciascun lato.<\/p>\n
La posizione fissa consentirebbe sempre al nostro pulsante di rimanere nello stesso punto quando scorriamo la pagina, e lo z-index di un numero molto grande<\/span> fa s\u00ec che il pulsante si sovrapponga sempre ad altri elementi del sito web.<\/p>\n
Quando passiamo il mouse su un pulsante, il cursore assume la forma di un puntatore e lo sfondo diventa grigio scuro. Per facilitare <\/span>la transizione, attribuiamo<\/span> la transizione di 0,3 secondi alla propriet\u00e0 color-background. Inoltre, quando clicchiamo sul pulsante, anche il colore dello sfondo cambia e diventa un po'<\/span> pi\u00f9<\/span> chiaro.<\/p>\n
\n
<\/div>\n
Aggiungere un'icona<\/strong><\/p>\n
In questo momento il nostro pulsante \u00e8 vuoto, quindi aggiungiamo un'icona. F<\/span>acciamo questo<\/span> aggiungendo uno pseudo-elemento :: after<\/em> in questo modo:<\/p>\n
#button<\/span>::after<\/span> {\r\n  content<\/span>: \"\\f<\/span>077\"<\/span>;\r\n  font-family<\/span>: FontAwesome;\r\n  font-weight<\/span>: normal<\/span>;\r\n  font-style<\/span>: normal<\/span>;\r\n  font-size<\/span>: 2em<\/span><\/span>;\r\n  line-height<\/span>: 50px<\/span><\/span>;\r\n  color<\/span>: #fff<\/span>;\r\n}\r\n\r\n<\/pre>\n
Selezioneremo un'icona dalla pi\u00f9 famosa libreria di font FontAwesome. <\/a>Ho deciso di usare <\/span> un'icona Chevron Up<\/a>.<\/p>\n
Per visualizzarlo in uno pseudo-elemento, imposta la famiglia di font su FontAwesome e assegna il valore Unicode della tua icona alla propriet\u00e0 content.<\/p>\n
Assicurati inoltre,<\/span> che l'altezza della linea sia uguale all'altezza dell'icona se desideri che sia centrata orizzontalmente.<\/p>\n
\n
<\/div>\n
Aggiunta di funzionalit\u00e0 con jQuery<\/strong><\/p>\n
In questa sottosezione ti mostrer\u00f2 come far funzionare il pulsante come previsto. Il modo pi\u00f9 semplice per farlo <\/span>\u00e8<\/span> utilizzare una libreria JavaScript jQuery. Per prima cosa, dobbiamo aggiungere jQuery al codice HTML del nostro codice. Aggiungi questa riga di codice appena prima del tag di chiusura del body<\/span>.<\/p>\n
<script<\/span> src<\/span>=\u201dhttps:<\/span>\/\/cdnjs<\/span>.cloudflare<\/span>.com<\/span>\/ajax<\/span>\/libs<\/span>\/jquery<\/span>\/3.1.1\/jquery<\/span>.min<\/span>.js<\/span>\u201d><\/script<\/span>><\/span>\r\n<\/pre>\n
Ora possiamo scrivere il nostro script usando la sintassi jQuery. Aggiungi il seguente script dopo la linea jQuery:<\/p>\n
<script<\/span>>\r\n\r\njQuery(document<\/span>).ready(function<\/span>() {\r\n  \r\n  var<\/span> btn =<\/span> $<\/span>('#button'<\/span>);\r\n\r\n  $<\/span>(window<\/span>).scroll<\/span>(function<\/span>() {\r\n    if<\/span> ($<\/span>(window<\/span>).scrollTop() ><\/span> 300<\/span>) {\r\n      btn.addClass('show'<\/span>);\r\n    } else<\/span> {\r\n      btn.removeClass('show'<\/span>);\r\n    }\r\n  });\r\n\r\n  btn.on('click'<\/span>, function<\/span>(e) {\r\n    e.preventDefault();\r\n    $<\/span>('html, body'<\/span>).animate({scrollTop:0<\/span>}, '300'<\/span>);\r\n  });\r\n\r\n});\r\n\r\n<\/script<\/span>>\r\n\r\n<\/pre>\n
Diamo uno sguardo pi\u00f9 da vicino a questo script.<\/p>\n
Noterai la prima riga di codice:<\/p>\n
jQuery(document<\/span>).ready(function<\/span>() {\r\n<\/pre>\n
In pratica si sta dicendo, eseguire il codice all'interno di questa funzione solo quando il documento \u00e8 completamente caricato. Questo \u00e8 un ottimo modo per prevenire gli <\/span>errori, nel caso in cui il codice JavaScript desideri apportare modifiche a parti di una pagina web che non sono completamente caricate nel browser.<\/p>\n
Il codice che eseguiamo dopo che il documento \u00e8 stato caricato completamente, \u00e8 costituito da due parti principali di codice in cui ognuno sta facendo le proprie <\/span>cose.<\/p>\n
La prima parte dello script fa apparire e scomparire il nostro pulsante dopo che lo scorrimento della pagina raggiunge un certo punto. La seconda parte fa scorrere la pagina verso l'alto dopo aver cliccato<\/span> sul pulsante. Esaminiamo ciascuno in dettaglio.<\/p>\n
<\/div>\n
\n
<\/div>\n
Fai apparire <\/span>e scomparire il pulsante<\/span><\/strong><\/p>\n
Questo \u00e8 il codice che fa il trucco:<\/p>\n
 var<\/span> btn =<\/span> $<\/span>('#button'<\/span>);\r\n\r\n  $<\/span>(window<\/span>).scroll<\/span>(function<\/span>() {\r\n    if<\/span> ($<\/span>(window<\/span>).scrollTop() ><\/span> 300<\/span>) {\r\n      btn.addClass('show'<\/span>);\r\n    } else<\/span> {\r\n      btn.removeClass('show'<\/span>);\r\n    }\r\n  });\r\n\r\n<\/pre>\n
Prima dichiariamo una variabile btn e la puntiamo a un elemento con un ID di pulsante, in modo che sia pi\u00f9 facile per noi fare riferimento ad esso pi\u00f9 avanti nel codice. Inoltre, questo aiuta JavaScript ad eseguire<\/span> i calcoli pi\u00f9 velocemente<\/span>. Una volta archiviato l'elemento in una variabile, JavaScript non avr\u00e0 bisogno di cercare l'intera pagina ancora <\/span>e ancora <\/span>ogni volta che sar\u00e0 necessario utilizzarlo nuovamente nel nostro codice.<\/p>\n
jQuery ha una comoda funzione .scroll (). Quello che fa \u00e8 collega <\/span>un pezzo di codice che verr\u00e0 eseguito ogni volta che si verifica un evento di scorrimento sulla tua pagina web. Prende un parametro, che \u00e8 una funzione che viene eseguita ogni volta che si fa scorrere una pagina. Sebbene sia possibile applicarlo a qualsiasi elemento di scorrimento<\/span>, come ad esempio cornici ed elementi con propriet\u00e0 di overflow impostate per lo scorrimento, di solito lo applichiamo all'elemento della finestra, poich\u00e9 in questo caso lo scorrimento avviene nella maggior parte dei casi, incluso il nostro esempio.<\/p>\n
$<\/span>(window<\/span>).scroll<\/span>(function<\/span>() {\r\n<\/pre>\n
All'interno della funzione poniamo questa istruzione if \/ else:<\/p>\n
    if<\/span> ($<\/span>(window<\/span>).scrollTop() ><\/span> 300<\/span>) {\r\n      btn.addClass('show'<\/span>);\r\n    } else<\/span> {\r\n      btn.removeClass('show'<\/span>);\r\n    }\r\n\r\n<\/pre>\n
Quello che stiamo cercando di fare qui \u00e8 controllare la posizione verticale della barra di scorrimento, e fare apparire il nostro pulsante quando \u00e8 al di sotto di un certo punto, e sparire quando \u00e8 sopra quel punto.<\/p>\n
Per ottenere la posizione corrente della barra di scorrimento, utseremo <\/span> un metodo jQuery integrato .scrollTop (). Non accetta argomenti e restituisce semplicemente un numero di pixel nascosto sopra l'area di scorrimento<\/span>.<\/p>\n
Quindi, ogni volta che scorriamo<\/span>, JavaScript controlla quanti pixel sono nascosti e li confronta con un numero. Nel nostro caso, ho impostato il numero su 300, ma puoi modificarlo se lo desideri.<\/p>\n
Se superiamo 300px, aggiungiamo uno show di classe al nostro elemento button, che lo far\u00e0<\/span> apparire. Se il numero \u00e8 inferiore a 300, cancelliamo <\/span>quella classe. Aggiungere e rimuovere le <\/span>classi \u00e8 un'altra ragione per cui jQuery \u00e8 cos\u00ec popolare. Possiamo farlo con due semplici metodi addClass () e removeClass ().<\/p>\n
Tuttavia non abbiamo ancora la classe show nel nostro CSS, quindi aggiungiamola:<\/p>\n
    if<\/span> ($<\/span>(window<\/span>).scrollTop() ><\/span> 300<\/span>) {\r\n      btn.addClass('show'<\/span>);\r\n    } else<\/span> {\r\n      btn.removeClass('show'<\/span>);\r\n    }\r\n\r\n<\/pre>\n
Per <\/span>default il nostro pulsante sar\u00e0 nascosto, quindi dovremmo aggiungere alcune altre regole all'elemento #button:<\/p>\n
#button<\/span> {\r\n  transition: background-color .3s<\/span><\/span>, \r\n    opacity .5s<\/span><\/span>, visibility .5s<\/span><\/span>;\r\n  opacity<\/span>: 0<\/span>;\r\n  visibility<\/span>: hidden<\/span>;\r\n}\r\n\r\n<\/pre>\n
Per rendere uniforme la transizione, ho aggiunto altri due valori all'attributo di transizione, l'opacit\u00e0 e la visibilit\u00e0 impostate su 0,5 secondi.<\/p>\n
<\/div>\n
\n
<\/div>\n
Scorri in alto<\/strong><\/h4>\n
La seconda parte dello script consente di scorrere fino alla parte superiore della pagina dopo aver cliccato<\/span> sul pulsante.<\/p>\n
  btn.on('click'<\/span>, function<\/span>(e) {\r\n    e.preventDefault();\r\n    $<\/span>('html, body'<\/span>).animate({scrollTop:0<\/span>}, '300'<\/span>);\r\n  });\r\n\r\n<\/pre>\n
Il primo metodo jQuery che vediamo qui \u00e8 on ().<\/a> Il suo primo parametro \u00e8 l'evento \"click\" di JavaScript<\/span>, che si verifica ogni volta che facciamo un clic del mouse nel nostro browser. Il secondo parametro \u00e8 una funzione di gestione, che viene attivata non appena si verifica l'evento.<\/p>\n
La funzione gestore prende un parametro evento. Possiamo chiamarlo come vogliamo, ma di solito \u00e8 preferibile l'e o l'event Abbiamo bisogno del parametro event per passarlo alla funzione e usarlo per il metodo preventDefault ().<\/p>\n
Il metodo e.preventDefault () impedisce l'azione predefinita dell'evento, ad esempio un collegamento non ci porta alla pagina successiva. Nel nostro caso non \u00e8 cruciale, dal momento che il nostro elemento di ancoraggio manca dell'attributo href e non ci porterebbe comunque a una nuova pagina, ma \u00e8 sempre meglio ricontrollare.<\/p>\n
.animate()<\/a><\/em><\/strong><\/p>\n
Il metodo jQuery. Animato () \u00e8 quello che fa tutto il trucco.<\/p>\n
    $<\/span>('html, body'<\/span>).animate({scrollTop:0<\/span>}, '300'<\/span>);\r\n<\/pre>\n
Il primo parametro del metodo .animate () \u00e8 l'elenco di propriet\u00e0 che dovremmo animare. La nostra propriet\u00e0 \u00e8 chiamata scrollTop, e vogliamo che abbia un valore 0. Il tipo di questo parametro \u00e8 un oggetto semplice ed \u00e8 per questo che dobbiamo usare parentesi graffe e annotare i nostri valori usando la sintassi coppia chiave \/ valore.<\/p>\n
Il secondo parametro \u00e8 la velocit\u00e0 con cui vogliamo eseguire la nostra animazione. Viene misurato in millisecondi e maggiore \u00e8 il numero, pi\u00f9 lenta \u00e8 l'animazione. Quello predefinito \u00e8 400, ma l'ho modificato a 300.<\/p>\n
Infine, applichiamo il metodo animato all'HTML e agli elementi del corpo sulla nostra pagina web.<\/p>\n
Ora ogni volta che clicchiamo sul pulsante, ci porta<\/span> in cima alla pagina.<\/p>\n
<\/div>\n
\n
<\/div>\n
Demo<\/a><\/h2>\n
Puoi vedere il risultato finale in questa demo di CodePen<\/a>. Ho anche incluso alcuni esempi di testo l\u00ec a scopo dimostrativo.<\/p>\n
Guarda la penna\u00a0Back to Top Button<\/a>\u00a0di Matthew Cain (@matthewcain<\/a>) su\u00a0CodePen<\/a>.<\/p>\n
<\/div>\n
\n
<\/div>\n
Riflessioni finali<\/strong><\/h2>\n
I pulsanti Torna all'inizio sono un grande elemento di usabilit\u00e0 di una pagina Web e l'averne uno sul tuo sito web aggiunge un piccolo ma utile dettaglio a cui la maggior parte di noi \u00e8 abituata. Spero<\/span> che questa guida ti abbia aiutato ad ampliare le tue conoscenze su CSS e JavaScript, fornendo alcuni momenti di \"a-ha\" che possono essere cos\u00ec utili per aspiranti progettisti e sviluppatori web.<\/p>\n
Continua a hackerare<\/span>!<\/p>\n
***<\/p>\n
Questo articolo \u00e8 stato tradotto da inglese. L\u2019originale puoi trovare qui: Creating a Back to Top Button with CSS & jQuery<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Un pulsante Torna all'inizio \u00e8 qualcosa che molti di voi probabilmente hanno visto su molti siti web. \u00c8 quella freccia che appare nell'angolo in basso a destra di una pagina web quando inizi a scorrere. Quando si fai clic su questo pulsante, ti riporta in cima alla pagina. Se vuoi aggiungere un pulsante Torna all'inizio […]<\/p>\n","protected":false},"author":1806027,"featured_media":3646,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[141,5,135],"tags":[126,63,143,140],"yoast_head":"\nCreazione di un pulsante Torna all'inizio con CSS e jQuery<\/title>\n<meta name=\"description\" content=\"Se vuoi aggiungere un pulsante Torna all'inizio mentre stai ancora progettando un sito web, o sei semplicemente curioso di sapere come crearne uno da solo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creazione di un pulsante Torna all'inizio con CSS e jQuery\" \/>\n<meta property=\"og:description\" content=\"Se vuoi aggiungere un pulsante Torna all'inizio mentre stai ancora progettando un sito web, o sei semplicemente curioso di sapere come crearne uno da solo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"TemplateMonster Blog Italia\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonster.italia\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-01T12:15:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-11-01T12:16:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/it\/wp-content\/uploads\/sites\/7\/2018\/11\/pulsante-Torna-allinizio.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Natalia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@templatemonster\" \/>\n<meta name=\"twitter:site\" content=\"@templatemonster\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Natalia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/\"},\"author\":{\"name\":\"Natalia\",\"@id\":\"https:\/\/monsterspost.com\/it\/#\/schema\/person\/4ab7691ed51077c6a15c92452722844d\"},\"headline\":\"Creazione di un pulsante Torna all’inizio con CSS e jQuery\",\"datePublished\":\"2018-11-01T12:15:44+00:00\",\"dateModified\":\"2018-11-01T12:16:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/\"},\"wordCount\":1360,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/it\/#organization\"},\"keywords\":[\"CSS3\",\"HTML5\",\"jQuery\",\"web development\"],\"articleSection\":[\"jQuery\",\"Tutorial\",\"Web Development\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/\",\"url\":\"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/\",\"name\":\"Creazione di un pulsante Torna all'inizio con CSS e jQuery\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/it\/#website\"},\"datePublished\":\"2018-11-01T12:15:44+00:00\",\"dateModified\":\"2018-11-01T12:16:37+00:00\",\"description\":\"Se vuoi aggiungere un pulsante Torna all'inizio mentre stai ancora progettando un sito web, o sei semplicemente curioso di sapere come crearne uno da solo.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creazione di un pulsante Torna all’inizio con CSS e jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/it\/#website\",\"url\":\"https:\/\/monsterspost.com\/it\/\",\"name\":\"TemplateMonster Blog Italia\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/it\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/it\/#organization\",\"name\":\"MonsterPost Italia\",\"url\":\"https:\/\/monsterspost.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/monsterspost.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/it\/wp-content\/uploads\/sites\/7\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/it\/wp-content\/uploads\/sites\/7\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost Italia\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/\",\"https:\/\/www.facebook.com\/TemplateMonster.italia\/\",\"https:\/\/twitter.com\/templatemonster\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/it\/#\/schema\/person\/4ab7691ed51077c6a15c92452722844d\",\"name\":\"Natalia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/monsterspost.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/aeb0ab46ce12e644bbacc90b90035ca8?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/aeb0ab46ce12e644bbacc90b90035ca8?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Natalia\"},\"description\":\"A freelance copywriter, who has a great interest in writing, content-related stuff, traveling, and photography. She is always mastering her writing skills to synthesize the essence of any business ideology in an easy-to-use nugget of words to get people to feel, think, or respond. Instagram.\",\"url\":\"https:\/\/monsterspost.com\/it\/author\/natalia\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creazione di un pulsante Torna all'inizio con CSS e jQuery","description":"Se vuoi aggiungere un pulsante Torna all'inizio mentre stai ancora progettando un sito web, o sei semplicemente curioso di sapere come crearne uno da solo.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/","og_locale":"it_IT","og_type":"article","og_title":"Creazione di un pulsante Torna all'inizio con CSS e jQuery","og_description":"Se vuoi aggiungere un pulsante Torna all'inizio mentre stai ancora progettando un sito web, o sei semplicemente curioso di sapere come crearne uno da solo.","og_url":"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/","og_site_name":"TemplateMonster Blog Italia","article_publisher":"https:\/\/www.facebook.com\/TemplateMonster.italia\/","article_published_time":"2018-11-01T12:15:44+00:00","article_modified_time":"2018-11-01T12:16:37+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/it\/wp-content\/uploads\/sites\/7\/2018\/11\/pulsante-Torna-allinizio.jpg","type":"image\/jpeg"}],"author":"Natalia","twitter_card":"summary_large_image","twitter_creator":"@templatemonster","twitter_site":"@templatemonster","twitter_misc":{"Scritto da":"Natalia","Tempo di lettura stimato":"8 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/"},"author":{"name":"Natalia","@id":"https:\/\/monsterspost.com\/it\/#\/schema\/person\/4ab7691ed51077c6a15c92452722844d"},"headline":"Creazione di un pulsante Torna all’inizio con CSS e jQuery","datePublished":"2018-11-01T12:15:44+00:00","dateModified":"2018-11-01T12:16:37+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/"},"wordCount":1360,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/it\/#organization"},"keywords":["CSS3","HTML5","jQuery","web development"],"articleSection":["jQuery","Tutorial","Web Development"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/","url":"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/","name":"Creazione di un pulsante Torna all'inizio con CSS e jQuery","isPartOf":{"@id":"https:\/\/monsterspost.com\/it\/#website"},"datePublished":"2018-11-01T12:15:44+00:00","dateModified":"2018-11-01T12:16:37+00:00","description":"Se vuoi aggiungere un pulsante Torna all'inizio mentre stai ancora progettando un sito web, o sei semplicemente curioso di sapere come crearne uno da solo.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/it\/pulsante-torna-allinizio-con-css-e-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/it\/"},{"@type":"ListItem","position":2,"name":"Creazione di un pulsante Torna all’inizio con CSS e jQuery"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/it\/#website","url":"https:\/\/monsterspost.com\/it\/","name":"TemplateMonster Blog Italia","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/it\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/it\/#organization","name":"MonsterPost Italia","url":"https:\/\/monsterspost.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/monsterspost.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/it\/wp-content\/uploads\/sites\/7\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/it\/wp-content\/uploads\/sites\/7\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost Italia"},"image":{"@id":"https:\/\/monsterspost.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/","https:\/\/www.facebook.com\/TemplateMonster.italia\/","https:\/\/twitter.com\/templatemonster"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/it\/#\/schema\/person\/4ab7691ed51077c6a15c92452722844d","name":"Natalia","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/monsterspost.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/aeb0ab46ce12e644bbacc90b90035ca8?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/aeb0ab46ce12e644bbacc90b90035ca8?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Natalia"},"description":"A freelance copywriter, who has a great interest in writing, content-related stuff, traveling, and photography. She is always mastering her writing skills to synthesize the essence of any business ideology in an easy-to-use nugget of words to get people to feel, think, or respond. Instagram.","url":"https:\/\/monsterspost.com\/it\/author\/natalia\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/posts\/3644"}],"collection":[{"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/users\/1806027"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/comments?post=3644"}],"version-history":[{"count":4,"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/posts\/3644\/revisions"}],"predecessor-version":[{"id":3649,"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/posts\/3644\/revisions\/3649"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/media\/3646"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/media?parent=3644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/categories?post=3644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/tags?post=3644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
.scroll()<\/a><\/strong><\/em><\/p>\n