jQuery - défilement à l'intérieur d'un div? scrollTo?

ScrollTo pourrait l'aider, mais défilement est absolument nécessaire? Je crois même que c'est mieux de l'utiliser juste slideUp() et slideDown()

J'ai modifié le code HTML juste un peu pour donner la diapositive éléments d'une classe et d'un identifiant.

Démo Live: 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');
    });
});

Mise à JOUR

Si vous devez avoir le défilement 🙂

Voici un exemple: http://jsfiddle.net/ztFWv/3/

Inclure la scrollTo fichier JS et utiliser la commande de cette façon.

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

OriginalL'auteur Dutchie432

Voir ces:

Comment faire défiler la fenêtre à l'aide de JQuery $.scrollTo() la fonction

OriginalL'auteur Harold SOTA

J'ai été jouer avec le défilement etc. pendant plusieurs heures aujourd'hui et viens avec ce que je pense est d'un joli cadre pour le défilement sans les barres de défilement, similaire à ce qui est demandé ici. Il ne défilement vertical, soit une "page" à un moment ou à un élément spécifique (par exemple un DIV). Il le fait aussi à défilement horizontal, soit une page à un moment ou à un élément spécifique (par exemple, une DURÉE).

Le voir en action à ce violon

L'exemple le HTML est:

<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>

Le CSS est:

#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;
}

Le javascript est:

// 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;
}
});

OriginalL'auteur Neil