Html anchor orizzontalmente senza javascript

http://www.indofolio.com/ , Sto cercando di creare un sito web con funzioni simili a questo, ma non capisco come abbia fatto lo scorrimento orizzontale con il tag di ancoraggio senza javascript. Distriggers javascript e il suo sito web funziona ancora correttamente. Adoro il miglioramento progressivo che ha fatto.

Prova il codice per l’ancoraggio orizzontale, estrai il blocco in linea e vai a sinistra e funziona perfettamente.

      .ab { width: 20%; height: 20%; float: left; display: inline-block; border: 1px solid red; }    aaaaaaa bbbbbbb 
  • test
  • test2
  • test3

Come ha detto Quentin, ma la sua spiegazione potrebbe essere un po ‘carente se sei nuovo al web design. Con javascript distriggersto, si noti che l’ url nelle modifiche. La homepage è www.indofolio.com/#box1 la successiva ha #box2 , ecc. Quelle sono id delle caselle di contenuto che sta utilizzando. Il comportamento normale per un tag è di “saltare” su quei punti se esistono su una pagina e l’ancoraggio è impostato per farlo. La sua ancora di home page è Home dove l’ href è ciò che causa il salto in quella posizione.

EDIT: Ecco un codice rielaborato per il tuo esempio.

HTML

  
  • test1
  • test2
  • test3
  • test4
  • test5

CSS

 body { padding: 0; margin: 0; } .ab { width: 20%; float: left; padding: 0; margin: 0; } .ab div { height: 500px; border: 1px solid red; } #container { width: 500%; /* five page widths for five horizontal pages */ padding: 0; margin: 1.5em 0 0; } #container ul { width: 100%; list-style: none; padding: 0; margin: 0; } #nav { position: fixed; left: 0; top: 0; } #nav a { margin-right: 10px; display: inline-block; } 

Scorre verticalmente, usando normali ancore, se JS non è disponibile.

Il posizionamento orizzontale viene applicato con JS.