Faites défiler jusqu'à la section suivante

Mon code ressemble à ceci:

<div id="arrow">
    <a class="next"></a>
    <a class="previous"></a>
</div>

<section id="first">
...
</section>

<section id="second">
...
</section>

<section id="third">
...
</section>

L'élément #arrow a position: fixed, et je suis en train de faire le défilement de la fenêtre à la prochaine section quand a.next est cliqué.

Ex: La première fois a.next est cliqué, la fenêtre défile pour section#first, la deuxième fois, la fenêtre défile pour section#second, etc. La même chose arrive à a.previous.

Ce que quelqu'un sait comment résoudre ce problème?

Merci beaucoup!

MODIFIER

Mon code JS:

$('#arrows a.previous').click(function() {
    $.scrollTo($(this).closest('section').prev(),800);
});

$('#arrows a.next').click(function() {
    $.scrollTo($(this).closest('section').next(),800);
});
InformationsquelleAutor Matheus Souza | 2015-04-20
  1. 2

    Vous aurez besoin pour gérer à 3 événements dans ce cas:

    1. Page actuelle position - mise à jour à chaque fois.
    2. Utilisateur fait défiler manuellement la page.
    3. Utilisateur clique sur le prev ou next.

    2, 3 besoin d'utiliser la page actuelle de la position et de la mise à jour, selon la direction de cette page est de défilement.

    Mon petit démos : Version Verticale jsFiddle --- Version Horizontale jsFiddle

    Version verticale extrait :

    JS:

    $(function(){
var pagePositon = 0,
sectionsSeclector = 'section',
$scrollItems = $(sectionsSeclector),
offsetTolorence = 30,
pageMaxPosition = $scrollItems.length - 1;
//Map the sections:
$scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });
//Bind to scroll
$(window).bind('scroll',upPos);
//Move on click:
$('#arrow a').click(function(e){
if ($(this).hasClass('next') && pagePositon+1 <= pageMaxPosition) {
pagePositon++;
$('html, body').stop().animate({ 
scrollTop: $scrollItems.eq(pagePositon).offset().top
}, 300);
}
if ($(this).hasClass('previous') && pagePositon-1 >= 0) {
pagePositon--;
$('html, body').stop().animate({ 
scrollTop: $scrollItems.eq(pagePositon).offset().top
}, 300);
return false;
}
});
//Update position func:
function upPos(){
var fromTop = $(this).scrollTop();
var $cur = null;
$scrollItems.each(function(index,ele){
if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele);
});
if ($cur != null && pagePositon != $cur.data('pos')) {
pagePositon = $cur.data('pos');
}                   
}
});

    CSS:

    section { min-height:800px; }
#arrow {
position:fixed; 
right:0; 
top:0;
background-color:black;
color:white;
}
#arrow a{
display:inline-block;
padding:10px 20px;
cursor:pointer;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="arrow">
<a class="next">next</a>
<a class="previous">prev</a>
</div>
<section style="background-color:green">...</section>
<section style="background-color:blue">...</section>
<section style="background-color:red">...</section>

    • C'était exactement ce que je cherchais, merci! J'ai prolongé votre fonction pour utiliser une nav pour aller en bas de la page, et une fois que vous frappez le dernier élément, faites défiler vers le haut: violon lien
    InformationsquelleAutor Shlomi Hassid
  2. 2

    Tout ce que vous devez, pour permettre à l'utilisateur d'utiliser les deux flèches et la barre de défilement:

    JS:

    var $sec = $("section");
$(".prev, .next").click(function(){
var y = $sec.filter(function(i, el) {
return el.getBoundingClientRect().bottom > 0;
})[$(this).hasClass("next")?"next":"prev"]("section").offset().top;
$("html, body").stop().animate({scrollTop: y});
});

    CSS:

    *{margin:0;padding:0;}
#arrow{
position:fixed;
width:100%;
text-align:center;
}
#arrow a{
display:inline-block;
background: tomato;
padding:6px 15px;
border-radius:3px;
cursor:pointer;
}
section{
height:1200px;
border:3px solid #444;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="arrow"><a class="prev">&uarr;</a><a class="next">&darr;</a></div>
<section>1</section>
<section style="height:500px;">2</section>
<section>3</section>
<section style="height:600px;">4</section>
<section>5</section>

    Pour expliquer le jQuery un peu:

    //Cache your selectors
var $sec = $("section"); 
//On any of both arrows click
$(".prev, .next").click(function(){
//We need to get current element
//before defining the `.next()` or `.prev()` element to target
//and get it's `offset().top` into an `y` variable we'll animate to.
//A current element is always the one which bottom position
//(relative to the browser top) is higher than 0.
var y = $sec.filter(function(i, el) {
return el.getBoundingClientRect().bottom > 0;
})[$(this).hasClass("next")?"next":"prev"]("section").offset().top;
//(Line above:) if the clicked button className was `"next"`,
//target the the `.next("section")`, else target the `.prev("section")`
//and retrieve it's `.offset().top`
$("html, body").stop().animate({scrollTop: y});
});
    InformationsquelleAutor Roko C. Buljan
  3. 0

    j'ai essayé de faire avec .la plus proche("section"), mais il ne fonctionne que lorsque la section est un parent de l'élément sur lequel vous avez cliqué, donc c'est la meilleure façon, je suis

    JS:

    sections=$("section");
s=0;
$(".next").click(function() {
if(s<sections.length-1){
s++;
$('html, body').animate({
scrollTop: sections.eq(s).offset().top
}, 500);
}});
$(".previous").click(function() {
if(s>0){
s--;
$('html, body').animate({
scrollTop: sections.eq(s).offset().top
}, 500);
}});

    CSS:

    section{
background-color:#bbb;
width:100%;
height:700px;
border-bottom:2px solid #eee;
}
#arrow{
position:fixed;
}
#first{
background-color: red;
}
#second{
background-color:green;
}
#third{
background-color: blue;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="arrow">
<a class="next">next</a>
<a class="previous">prev</a>
</div>
<section id="first">
...
</section>
<section id="second">
...
</section>
<section id="third">
...
</section>

    • Semble que votre code de gâcher les choses si vous mélangez les flèches et la barre de défilement actions de l'utilisateur. Aussi il est bon d'utiliser .stop() avant de permettre à l'utilisateur d'aller hystérique avec clics.
    InformationsquelleAutor Anis Boukhris