Rechercher le lien le plus proche

Question

J'ai un site de défilement d'une seule page avec 7 pages et chaque page est d'environ 1000px de hauteur. Ma structure de menu va comme ceci,

<a href="#home" class="home">Home</a> 
<a href="#about" class="about">About</a> 
<a href="#team" class="team">Team</a> 
<a href="#contact" class="contact">Contact</a> 

En cliquant sur un lien, il défilera à l'ID qui lui est attribué à la section.

J'ai également une petite position fixe bouton avec 2 flèches pointant vers le haut et vers le bas.

<div class="button"> 
    <i class="go-up"></i> //up arrow 
    <i class="go-down"></i> //down arrow 
</div> 

Je veux naviguer vers la section la plus proche en cliquant sur les flèches. Pour un exemple, supposons que je suis à l'intérieur du #team, alors quand je clique sur le .go-up, il faut naviguer vers le #about et le .go-down devrait aller à #contact. Aussi après avoir déplacé à nouveau le #contact cela devrait identifier les nouvelles cibles les plus proches.

S'il vous plaît aidez-moi à le faire dans jQuery.

Answer 1

J'utiliser un drapeau de classe

par exemple en utilisant la classe current sur les liens

$('.button i').click(function() { 
    var $anchor = $('.current'); 
    var direction = $(this).prop('class'); 

    if (direction == 'go-up' && $anchor.prev().length > 0) { 
     $('a').removeClass("current"); 
     $anchor.prev().addClass("current"); 
     $('html, body').stop().animate({ 
      scrollTop: $($anchor.prev().attr('href')).offset().top 
     }, 1500); 
    } else if (direction == 'go-down' && $anchor.next().length > 0) { 
     $('a').removeClass("current"); 
     $anchor.next().addClass("current"); 
     $('html, body').stop().animate({ 
      scrollTop: $($anchor.next().attr('href')).offset().top 
     }, 1500); 
    } 

}); 

alors... vous pouvez localiser le courant en utilisant $('.current')

et utiliser .prev() et .next()

http://jsfiddle.net/PhckT/1

Answer 2

Puisque vous avez mentionné pour vous aider à trouver une solution en utilisant jQuery, voici une solution:

monteras pourrait être quelque chose comme:

$('.button > .go-up').on("click",function(){ 
    var container = $("#mainPageContainer"); 
    var prevElement = container.prevAll('.aClassToPutOnPageContent:first'); 
    container.scrollTo(prevElement); 
    }); 

et descendre pourrait être:

$('.button > .go-down').on("click",function(){ 
    var container = $("#mainPageContainer"); 
    var nextElement = container.nextAll('.aClassToPutOnPageContent:first'); 
    container.scrollTo(nextElement); 
    });. 

Voir aussi This link pour un bon plugin de défilement de contenu!

Source: How to use jquery next() to select next div by class

---

Mais peut-être la prochaine fois essayer de chercher un peu plus! Il m'a fallu environ 20 secondes pour trouver ma source. (;

Bonne chance et amusez-vous,

Marc

Answer 3

En supposant que vous avez majoration comme ce qui suit:

<a href="#home" class="home">Home</a> 

<a href="#about" class="about">About</a> 

<a href="#team" class="team">Team</a> 
<a href="#contact" class="contact">Contact</a> 

    <div> 
     <div id="home"> 
      <p>Some content in 'home.'</p> 
      <div class="button"> 
       <i class="go-up">&uarr;</i> 
       <i class="go-down">&darr;</i></div> 
     </div> 
     <!-- other sections omitted for brevity --> 
    </div> 

Je suggère:

$('.button i').click(
    function(){ 
     var mvTo = $(this).closest('div[id]')[$(this).hasClass('go-up') ? 'prev' : 'next']().offset(), 
      x = mvTo.left, 
      y = mvTo.top; 
     window.scrollTo(x,y); 
    }); 

JS Fiddle demo.

Références:

• click().
• closest().
• hasClass().
• offset().