Прокрутка jQuery не работает корректно, когда внутри div

Я создал функцию jQuery, которая применяет класс к абзацу, а затем прокручивается до этого абзаца при нажатии кнопки. Он отлично работает, когда абзацы относятся к документу, но я хочу, чтобы свиток происходил внутри div. В настоящее время прокрутка работает, и она корректно применяет класс, но она не прокручивается до правильного абзаца. Кажется, что при каждом нажатии кнопки она прокручивается случайным образом.Прокрутка jQuery не работает корректно, когда внутри 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>

Чтобы увидеть его, когда он работает, изменение «.slider» в CSS, чтобы высота: 1000px и без переполнения. Кроме того, измените эту строку:

$('.slider').animate({scrollTop: $(".current").offset().top},'slow');

к этому:

$('html,body').animate({scrollTop: $(".current").offset().top},'slow');

источник

2010-10-15 Robert Pessagno

Надлежащее использование 'это' ключевое слово может помочь.

источник

2010-11-24 07:38:37 Jogendra

Прокрутка jQuery не работает корректно, когда внутри div

ответ

Смежные вопросы