Faites défiler jusqu'à un élément après un clic avec glisser vers le bas dans jQuery
Question
Je cherchais comment faire défiler dans l'élément suivant comme ceci:
Cliquez sur ces grandes lettres et fait défiler à l'élément courant après de clic et glisser vers le bas effet.
Il est ma tentative: (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'
},
}
);
});
La solution
JQuery ScrollTo devrait faire l'affaire
Modifier
Après avoir examiné le site échantillon, je me rends compte que cela pourrait être la meilleure option JQuery UI accordian.
Autres conseils
cette fonctionnalité peut être obtenue en utilisant jquery accordéon
vérifier le lien http://jqueryui.com/demos/accordion/
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow