2
J'ai créé une fonction jQuery qui applique une classe à un paragraphe, puis défile vers ce paragraphe lorsque vous cliquez sur un bouton. Cela fonctionne bien quand les paragraphes sont relatifs au document, mais je veux que le défilement se produise à l'intérieur d'un div. Actuellement, le défilement fonctionne et il applique la classe correctement, mais il ne fait pas défiler le paragraphe correct. Il semble que l'on fasse défiler la liste au hasard à chaque fois qu'on clique sur le bouton.Le défilement jQuery ne fonctionne pas correctement à l'intérieur de div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('.down').click(function() {
$('.current + p').addClass('current');
if ($('p:last').hasClass('current')) {
$('p').removeClass('current');
$('p:last').addClass('current');
return false;
}
else {
$('.current:first').removeClass('current');
return false;
}
});
$('.up').click(function() {
$('.current').prev('p').addClass('current');
if ($('p:first').hasClass('current')) {
$('p').removeClass('current');
$('p:first').addClass('current');
return false;
}
else {
$('.current:last').removeClass('current');
return false;
}
});
$('.down, .up').click(function() {
$('.slider').animate({scrollTop: $(".current").offset().top},'slow');
});
});
</script>
<style type="text/css">
.slider {
position: relative;
background: #ccc;
overflow: scroll;
height: 100px;
}
.slider p {
position: relative;
}
.nav {
position: fixed;
left: 500px;
z-index: 10;
}
p {
height: 100px;
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="up">UP</a>
<a href="#" class="down">DOWN</a>
</div>
<br /><br />
<div class="slider">
<p class="current">This is the first paragraph</p>
<p>111111111111111111111111</p>
<p>222222222222222222222222</p>
<p>333333333333333333333333</p>
<p>44444444444444444444444444</p>
<p>This is the last paragraph</p>
</div>
</body>
</html>
Pour voir quand cela fonctionne, le changement « .slider » dans le CSS à la hauteur: 1000px et sans débordement. En outre, changer cette ligne:
$('.slider').animate({scrollTop: $(".current").offset().top},'slow');
à ceci:
$('html,body').animate({scrollTop: $(".current").offset().top},'slow');