ScrollTo Layout
Permette la creazione di pagine scroll top e down alla pressione di link nel menu
// API dBJs-uiDavide Bausach / 18-05-2015
- data-stHeightToFix : altezza dlelo scroll per ottenere il fissaggio del menu (default 50)
- data-stMenuHeight : altezza dle menu in px (default 0)
- data-stSpeed : velocità scroll in ms (default 200)
Standard sintax
<div id="containerScrollTo" data-stHeightToFix="50" data-stMenuHeight="50" data-stSpped="500"> <div id="containerMenuScrollTo"> <div id="menuScrollTo"> <a href="javascript:void(0);" onclick="">Scroll 1</a> <!-- ... --> </div> </div> <div id="mayDivId"></div> <!-- ... --> </div>
L'implementazione del ScrollTo Layout è alquanto semplice.
È possibile replicare esattamente l'esempio aggiungento quanti contenitori
e voci di menù correllate si vuole, l'unica cosa a cui fare attenzione
è l'indicazione della proprietà data-stMenuHeight
che deve essere impostata del valore in px che avete dato all'altezza del div
contenente il menù nel vostro css per indicar eal sistema che quando si
scrolla verso il primo div contenuto lo scroll deve fermarsi a tali px dall'alto.
La proprietà data-stHeightToFix indica a che altezza si
vuole che il menù diventi fixed, solitamente sarebbe
opportuno impostare un'altezza pari all'altezza del menù stesso.
La proprietà data-stSpeed indica la velocità
in millisicendi dello scroll.
<div id="containerScrollTo" data-stHeightToFix="50" data-stMenuHeight="50" data-stSpped="500"> <div id="containerMenuScrollTo"> <div id="menuScrollTo"> <a href="javascript:void(0);" onclick="">Scroll 1</a> <a href="javascript:void(0);" onclick="">Scroll 2</a> <a href="javascript:void(0);" onclick="">Scroll 3</a> <a href="javascript:void(0);" onclick="">Scroll 4</a> </div> </div> <div id="scrollTo-1"></div> <div id="scrollTo-2"></div> <div id="scrollTo-3"></div> <div id="scrollTo-4"></div> </div>