Scorrere fino a un elemento dopo uno scatto con scivolo verso il basso in jQuery
Domanda
I stava cercando il modo per scorrere fino al prossimo elemento in questo modo:
Clicca quei grandi lettere e lo fa scorrere all'elemento corrente dopo di clic e scorrevole verso il basso effetto.
Non è il mio tentativo: (JSFiddle: http://jsfiddle.net/d272P/ )
HTML
<div id="head1">Click</div>
<div id="child1">Content</div>
<br/>
<div id="head2">Click</div>
<div id="child2">Content</div>
<br/>
<div id="head3">Click</div>
<div id="child3">Content</div>
CSS
#head1{width: 400px; height: 40px; background: orange;}
#head2{width: 400px; height: 40px; background: red;}
#head3{width: 400px; height: 40px; background: purple;}
#child1{width: 300px; height: 700px; background: green; display: none;}
#child2{width: 300px; height: 700px; background: cyan; display: none;}
#child3{width: 300px; height: 700px; background: pink; display: none;}
JavaScript
$('#head1').click(function() {
$('#child1').animate({
opacity: 'toggle',
height: 'toggle'
},
{
duration: 750,
specialEasing: {
width: 'linear',
height: 'easeInOutQuad'
},
}
);
});
$('#head2').click(function() {
$('#child2').animate({
opacity: 'toggle',
height: 'toggle'
},
{
duration: 750,
specialEasing: {
width: 'linear',
height: 'easeInOutQuad'
},
}
);
});
$('#head3').click(function() {
$('#child3').animate({
opacity: 'toggle',
height: 'toggle'
},
{
duration: 750,
specialEasing: {
width: 'linear',
height: 'easeInOutQuad'
},
}
);
});
Soluzione
JQuery scrollTo dovrebbe fare il trucco
Modifica
Dopo aver esaminato il sito di esempio, mi rendo conto che JQuery UI fisarmonica potrebbe essere l'opzione migliore.
Altri suggerimenti
questa funzionalità può essere ottenuto utilizzando jQuery fisarmonica
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow