JQuery прокрутки div с scrollTop - PullRequest
Новая
       14

JQuery прокрутки div с scrollTop

0 голосов
/ 07 декабря 2009

Я пытаюсь прокрутить div вверх или вниз при наведении курсора на соответствующие стрелки. Я также хочу, чтобы при нажатии кнопок можно было прыгать вниз по элементу div (подумайте, щелкая стрелки прокрутки окна вместо перетаскивания полосы прокрутки).

Прокрутка работает, а прыжки - нет. scrollTop () продолжает перенастраивать 0.

Вот код: 

function startScrollContent()
{
   if ($('.haccordion-opened').prev('.header').find('div').attr('title') != 'dontscroll' && $('.haccordion-opened span.arrow').length == 0)
   {
      $('.haccordion-opened').append('<span class="arrow down" style="position: absolute; bottom: 5px; left: 260px; font-size: 9pt;">&#9660;</span><span class="arrow up" style="position: absolute; bottom: 5px; left: 280px; font-size: 9pt;">&#9650;</span>');

      $('.content span.arrow').hover(function()
      {
         direction = ($(this).hasClass('up')) ? '-=' : '+=';
         $('.content .padding').animate({scrollTop: direction + $('.content .padding').css('height')}, 5000);
      }, function()
      {
         $('.content .padding').stop();
      });

      $('.content span.arrow').click(function()
      {
         $('.content .padding').stop();
         direction = ($(this).hasClass('up')) ? '-' : '+';

         alert($('.content .padding').scrollTop());
         //$('.content .padding').scrollTop($('.content .padding').scrollTop + direction + 100);
      });
   }

   return;
}

Как мне заставить работать переходную часть?

Ответы [ 2 ]

0 голосов
/ 07 декабря 2009

Без каких-либо аргументов функция scrollTop возвращает значение смещения. Используйте element.scrollTop (0) для прокрутки к вершине. Вот тест, который я запустил, который работал нормально в FF и IE8 (но не означает, что он будет работать в IE6 ). Я также изменил некоторые части вашего кода, потому что по какой-то причине события наведения и нажатия были привязаны к стрелкам, которые вы хотели найти под тегом содержимого (к которому вы их не добавляли), вы помещаете их под тег с хаккордеон-открытым классом. Кроме того, предоставленный вами HTML-код использует класс haccordion, а не класс haccordion-открытого, как в вашем javascript. Я изменил HTML, чтобы удовлетворить. 

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        if ($('.haccordion-opened').prev('.header').find('div').attr('title') != 'dontscroll' && $('.haccordion-opened span.arrow').length == 0)
        {
            $('.haccordion-opened').append('<span class="arrow down" style="position: absolute; bottom: 5px; left: 260px; font-size: 9pt;">&#9660;</span><span class="arrow up" style="position: absolute; bottom: 5px; left: 280px; font-size: 9pt;">&#9650;</span>');

            $('.haccordion-opened span.arrow').hover(function()
            {
                direction = ($(this).hasClass('up')) ? '-=' : '+=';
                $('.content .padding').animate({scrollTop: direction + $('.content .padding').css('height')}, 5000);
            }, function()
            {
                $('.content .padding').stop();
            });

            $('.haccordion-opened span.arrow').click(function()
            {
                $('.content .padding').stop();
                direction = ($(this).hasClass('up')) ? '-=' : '+=';
                $('.content .padding').animate({scrollTop: direction + 100}, 0);
            });
        }
    });
</script>
</head>
<body>
    <div class="haccordion-opened">
        <div class="header">
            <div title="blah"></div>
        </div>
        <div class="content">
            <div class="padding" style="height: 400px; overflow: hidden">
                <h4>Blah...</h4>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
                <p><br /><br /><br /><br /><br />test</p>
            </div>
        </div>
    </div>
</body>
</html>
0 голосов
/ 07 декабря 2009

Я написал в блоге о scrollIntoView () , который может оказаться полезным для выполнения именно этого типа прыжков.

...