20 Luglio 2013 10:36:27 · [Torna Su con CSS]
Postato da
Ciao, come avete potuto notare, sul mio sito ho aggiunto un pulsante dinamico che segue lo scrolling della pagina permettendo in qualsiasi momento di tornare sù senza dover risalire manualmente fino a cima pagina... la cosa buffa è che sono necessarie pochissime linee di CSS e HTML... vi consiglio di cercarvi fin da subito una icona png con la freccia in alto in modo da inserirla tra le chiamate CSS... il trucchetto funziona su tutti i browser e l'effetto è molto gradevole e soprattutto aiuta a navigare comodi in un sito web. L'idea mi è venuta quando ho notato che le mie pagine php erano chilometriche e che io stesso faticavo per risalire in cima, così mi sono riproposto di inserire qualcosa di più comodo e l'ho fatto! Usando Notepad++ aggiungere qualche riga di codice a fondo pagina in tutti i file mi ha rubato solo una decina di secondi, poi ho solo dovuto aggiungere delle nuove regole al mio foglio di stile   Vediamo come. Prima mettete a fondo pagina prima di </body> questa porzione di codice:

<a href="#" class="back-top"><span class="go-top">Torna Su</span></a>

Poi dopo che avrete inserito quella porzione di codice in tutte le pagine del vostro sito non resta che aggiungere le nuove regole al vostro foglio di stile (CSS) in questo modo:

/* Torna Su */
.back-top {
  position: fixed;
  bottom: 65px;
  right: 65px;
  width: 64px;
  height: 64px;
  display: block;
  background: url("BackTop.png") no-repeat center center;
  color: #000080 !important;
  text-decoration: none !important;
}
/* Torna Su */
.go-top {
  display: block;
  margin-top: 65px;
  text-align: center;
  color: #000080 !important;
  text-decoration: none !important;
}

E' tutto! Adesso godetevi il vostro sito web più che mai piacevole grazie a quel piccolo tocco magico che i CSS ci regalano  




Copyright © 2002-2018, Alessandro Marinuzzi