jQuery scroll div с scrollTop

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

Прокрутка работает, но прыжки не делают. 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; 
}

Как я могу получить прыжок часть рабочего?

источник

2009-12-07 papermate

Вы еще не пробовали код? Как это сработало для вас? – SimonDever

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

источник

2009-12-07 03:21:10

Это потребует от меня размещения нового элемента каждые X пикселей в DIV, чтобы я мог перейти к нему. Не так чисто, как я надеялся, что это будет ... – papermate

Без каких-либо аргументов функция scrollTop возвращает значение смещения. Используйте элемент element.scrollTop (0) для прокрутки вверх. Вот тест, который я запускал, который работал нормально в FF и IE8 (но это doesn't mean it will work in IE6). Я также изменил некоторые части вашего кода, потому что по какой-то причине у вас были события зависания и щелчка, привязанные к стрелкам, которые вы хотели найти под тегом контента (к которым вы не добавили), вы помещаете их под тегом с открытым классом haccordion. Кроме того, 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>

источник

2009-12-07 03:40:28 SimonDever

Вот что я пытаюсь сделать. Найдите, где в настоящий момент прокручивается div (из функции прокрутки hover'd) - что, скажем, на полпути вниз по div. Затем я хочу увеличить этот scoll на ~ 100 пикселей. Таким образом, div теперь будет на половину + 100 пикселей. Затем, чем больше вы нажимаете, тем дальше он перескакивает прокрутку div. scrollTop(), однако, перенастраивает смещение как 0. Независимо от того, как далеко вниз я прокручиваю его. – papermate

Можете ли вы вставить некоторый сокращенный HTML, чтобы я мог играть и тестировать? – SimonDever

http://slexy.org/view/s200KYx3jy <- Там вы идете. – papermate

jQuery scroll div с scrollTop

ответ

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