jQuery - прокрутка внутри div? scrollTo?

Question

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

Я хочу JQuery, чтобы показать запрошенные пункты после нажатия точных ссылок:

http://jsfiddle.net/ztFWv/

Любых идеи? Будет ли прокрутка помочь мне? Я пробовал этот плагин, но не повезло. Я бы предпочел не использовать iframe.

Answer 1

ScrollTo поможет, но листание абсолютно необходимо? Я думаю, что еще лучше использовать slideUp() и slideDown()

Я немного изменил HTML, чтобы дать элементам слайда класс и идентификатор.

Демо:http://jsfiddle.net/ztFWv/1/

<div id="slider"> 
    <ul> 
     <li id="one" class="slideItem"> 
      <h1>Header #1</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p> 
     </li> 
     <li id="two" class="slideItem"> 
      <h1>Header #2</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p> 
     </li> 
     <li id="three" class="slideItem"> 
      <h1>Header #3</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p> 
     </li> 
</div> 

     <a href="javascript:void(0);" class="one">Scroll to #1</a> 
     <a href="javascript:void(0);" class="two">Scroll to #2</a> 
     <a href="javascript:void(0);" class="three">Scroll to #3</a>  

JS

$('a').click(function(){ 
    var linkClass=$(this).attr('class'); 
    $('.slideItem:visible').slideUp('fast',function(){ 
     $('#' + linkClass).slideDown('fast'); 
    }); 
}); 

UPDATE

Если вы должны прокрутке :)

Вот пример: http://jsfiddle.net/ztFWv/3/

Включите JS файл scrollTo и использовать команду таким образом.

$('a').click(function(){ 
    $('#slider').scrollTo($('#' + $(this).attr('class')), 800); 
}); 

Answer 2

Да, используйте scrollTo jQuery plugin.

Это болванка. Я сам использовал его для нескольких проектов.

Есть другие способы, такие как TABS или скрытие и отображение divs, с анимацией или без нее. Я предпочитаю this method, поскольку он выглядит более профессионально.

Answer 3

Смотрите эти:

How to scroll the window using JQuery $.scrollTo() function

Answer 4

Мой любимый способ сделать это, чтобы добавить tabindex="0" атрибут тега, а затем вызвать focus() на элемент, который сделает браузер прокручивается в поле зрения.

Это не дает вам много контроля, но это естественная прокрутка и очень гладкая.

Answer 5

Я играю с прокруткой и т. Д. В течение нескольких часов сегодня, и придумал то, что я считаю аккуратным фреймворком для прокрутки без полос прокрутки, аналогично тому, что было предложено здесь. Он выполняет вертикальную прокрутку, либо «страницу» за раз, либо конкретный элемент (например, DIV). Он также выполняет горизонтальную прокрутку, либо страницу за раз, либо конкретный элемент (например, SPAN).

в действии на this fiddle

Пример HTML является:

<p> 
    <h1>Vertical scrolling</h1> 
    <button class="shift up"  value="updown" >^</button> 
    <button class="shift vertical" value="updown Av">A</button> <button class="shift vertical" value="updown Bv">B</button> 
    <div id="updown"> 
     <div id="Av"> AAAAAAA text AAAAAAA </div> 
     <div id="Bv"> BBBBBBB text BBBBBBB </div> 
     <div id="Cv"> CCCCCCC text CCCCCCC </div> 
     <div id="Mv"> MMMMMMM text MMMMMMM </div> 
    </div> 
    <button class="shift down"  value="updown" >v</button> 
    <button class="shift vertical" value="updown Cv">C</button> <button class="shift vertical" value="updown Mv">M</button> 
</p> 

<p> 
    <h1>Horizontal scrolling</h1> 
    <button class="shift right"  value="leftright" >&gt;</button> 
    <button class="shift horizontal" value="leftright Ah">A</button> <button class="shift horizontal" value="leftright Bh">B</button> 
    <div id="leftright"> 
     <span id="Ah"> AAAAAAA text AAAAAAA </span> 
     <span id="Bh"> BBBBBBB text BBBBBBB </span> 
     <span id="Ch"> CCCCCCC text CCCCCCC </span> 
     <span id="Mh"> MMMMMMM text MMMMMMM </span> 
    </div> 
    <button class="shift left"  value="leftright">&lt;</button> 
    <button class="shift horizontal" value="leftright Ch">C</button> <button class="shift horizontal" value="leftright Mh">M</button> 
</p> 

CSS-это:

#updown, #leftright{ 
    position: relative; 
    overflow: hidden;  
    line-height: 1.5em; 
    height: 1.5em; 
    width: 20em; 
    border: 2px solid #000; 
} 
#updown div { 
    position: absolute; 
    height: 1.5em; 
    width: 20em; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 
#leftright span { 
    position: absolute; 
    display: inline; 
    float: left; 
    height: 1.5em; 
    width: 20em; 
    margin: 0; 
    padding: 0; 
    border: 0; 

} 

Javascript является:

// See it in action at http://jsfiddle.net/Q7FFN/ 

    $('#updown div').each(function(i){  // position the "divs" 
     var $this = $(this); 
     var amount = $this.parent().height(); 
     $this.css({top: i * amount}); 
    });  
    $('#leftright span').each(function(i){  // position the "spans" 
     var $this = $(this); 
     var amount = $this.parent().width(); 
     $this.css({left: i * amount}); 
    });  

    $('.shift').click(function(){ 
     var $this = $(this); 
     var value = $this.attr('value'); 
     var values = value.split(/ +/); 
     var items = '#' + values[0]; 
     var item = (values.length == 2) ? '#' + values[1] : ''; 
     var classes = $this.attr('class'); 

     if (classes.match(/\bup\b/))    { // up - Use "match" instead of hasClass() for performance 
      var amount =$(items).height(); 
      $(items).children().animate({top: '-=' + amount}, 'slow'); 
     } else if (classes.match(/\bdown\b/))  { // down  
      var amount =$(items).height(); 
      $(items).children().animate({top: '+=' + amount}, 'slow'); 
     } else if (classes.match(/\bleft\b/))  { // left 
      var amount = $(items).width(); 
      $(items).children().animate({left: '-=' + amount}, 'slow'); 
     } else if (classes.match(/\bright\b/))  { // right 
      var amount = $(items).width(); 
      $(items).children().animate({left: '+=' + amount}, 'slow'); 
     } else if (classes.match(/\bvertical\b/)) { // vertical 
      var amount = $(item).css('top'); 
      console.log("amount=", amount); 
      $(items).children().animate({top: '-=' + amount}, 'slow'); 
     } else if (classes.match(/\bhorizontal\b/)) { // horizontal 
      var amount = $(item).css('left'); 
      $(items).children().animate({left: '-=' + amount}, 'slow'); 
     } else { 
      return false; 
     } 

});