Clever Next und Previous Buttons in jQuery

Question

Ich habe eine Webseite erstellt, die beim Drücken auf 'runter' automatisch zur nächsten ID scrollt (ein Bereich, der wegen Überlauf nicht sichtbar ist: versteckt) Wenn Sie 'hoch' drücken scrollt zurück.

Im Moment sagt jeder Pfeil einfach die Webseite an, um zu einem bestimmten div zu gehen, z. der ‚Pfeil nach unten‘, sagt

<a class="tab" href="#page">Down</a> 

Dies ist für nur zwei Seiten jedoch in Ordnung ist, wie ich mehr Seiten mit werde, was ich ist gerne in der Lage sein, die Menge der Seiten, zu spezifizieren und für die Pfeile automatisch zu ändern, die Link muss es zum nächsten gehen.

Zum Beispiel ist auf Seite 1 der 'Pfeil nach oben' nicht sichtbar, und wenn Sie den 'Pfeil nach unten' drücken, scrollt er nach # Seite2, woraufhin der 'Pfeil nach oben' sichtbar ist. Wenn Sie jetzt drücken Sie den Abwärtspfeil erneut, es bringt Sie zu # page3, woraufhin es dann ausgeblendet wird, wie Seite 3 die letzte Seite ist.

Ich denke, ich muss eine 'var' erstellen, die die Anzahl der Seiten angibt und die Pfeile unsichtbar machen wird die css-Eigenschaft "display" auf noch nicht ändern, ich weiß nicht, wie das geht noch, um die Links herauszufinden, welche Nummer als nächstes zu gehen!

bearbeiten V2: (Dies ist der aktuelle Code implementiert Hilfe von Ihrer Antwort, die ich teilweise konnte die Pfeile erscheinen lassen und mit diesem Code verschwinden.)

var PN = 1; 
var PA = $('.page').length; 

function checkArrows() { 
    if(PN === 1) { 
     $("#up_arrow").css({ "display": "none"}); 
    }else{ 
     $("#up_arrow").css({ "display": "block"}); 
    } 
    if(PN === PA) { 
     $("#down_arrow").css({"display": "none"}); 
    }else{ 
     $("#down_arrow").css({"display": "block"}); 
    } 
} 

$(document).ready(function(){ 
    checkArrows(); 
     $('.arrow').click(function(){ 
     var chk_arr = $(this).hasClass('down_arrow') ? PN++ : PN--; 
      checkArrows(); 
    }); 
}); 

Aus irgendeinem Grunde var PA = $('.page').length; nicht scheinen irgendwelche Werte zurückzugeben, obwohl ich 2 Vorkommen davon in der HTML-Datei habe.

In Bezug auf das Scrollen ist ein Ausschnitt aus dem Code

$('#down_arrow').click(function() { 

     $('a.arrow').removeClass('selected'); 
     $(this).addClass('selected'); 

     current = $(this); 

     $('#wrapper').scrollTo($(this).attr("href"), 1000);  

     return false; 
    }); 

und bin jetzt versuchen, einen Weg zu finden, die „href“ mit PN + 1 oder etwas zu aktualisieren, so dass die href #page # page2 wird

wie immer vielen Dank!

Answer 1

jsBin DEMO

var PN = 1; 
var PA = $('.box').length; 
var Pos = 0; 

function checkArrows() { 
    if(PN === 1) { 
     $("#up_arrow").css({ "display": "none"}); 
    }else{ 
     $("#up_arrow").css({ "display": "block"}); 
    } 
    if(PN === PA) { 
     $("#down_arrow").css({"display": "none"}); 
    }else{ 
     $("#down_arrow").css({"display": "block"}); 
    } 
} 
checkArrows(); 

function goTo(){ 
    checkArrows(); 
    Pos = $('.box').eq(PN-1).position().top; 
    $('#scroller').stop().animate({top: '-'+Pos},1200); 
} 
goTo(); 


$('#up_arrow').click(function(){ 
     PN--; 
     goTo(); 
}); 
$('#down_arrow').click(function(){ 
     PN++; 
     goTo(); 
}); 

HTML (vereinfacht):

<div id="nav"> 
    <button id="up_arrow">UP</button><button id="down_arrow">DOWN</button> 
    </div> 

    <div id="container"> 
    <div id="scroller"> 

    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 

    </div> 
    </div> 

CSS:

#container{ 
    position:relative; 
    background:#eee; 
    width:300px; 
    height:400px; 
    overflow:hidden; 
    } 

    .box{ 
    position:relative; 
    color:#fff; 
    background:#444; 
    padding:20px; 
    margin-bottom:10px; 

    } 

    #nav{ 
    position:fixed; 
    left:320px; 
    width:200px; 
    } 

    #scroller{ 
    position:absolute; 
    top:0px; 
    } 
    button{ 
    cursor:pointer; 
    } 

---

HERE ist eine nette Demo, die die Pfeile NICHT verstecken wird! Hör zu! ;)

Und nur ein weiterer demo scrollTop verwenden und mit 1 weniger HTML-Element

Answer 2

Zum einen eine massive dank Roko für seine Antwort, ohne sie könnte ich nicht „trialled und error'ed“ haben meinen Weg durch! Zweitens, ich entschuldige mich, da es wahrscheinlich sehr einfache Dinge sind und weil es wahrscheinlich sehr chaotisch sein wird, da es das erste Javascript-Ding ist, das ich geschrieben/optimiert habe. aber okie doke hier gehe ich!

Eine Variable definiert, auf welcher Seitenzahl sie steht, PN. Eine Funktion läuft dann und verbirgt den Pfeil nach oben, wenn auf der ersten Seite, und verbirgt den Pfeil nach unten, wenn auf der letzten Seite. Die letzte Seite wird durch eine globale Variable (PA) in der aktuellen HTML-Datei bestimmt.

var PN = 1; 

function checkArrows() { 
    if (PN === 1) { 
     $("#up_arrow").css({"display": "none"}); 
    } else { 
     $("#up_arrow").css({"display": "block"}); 
    } 
    if (PN === PA) { 
     $("#down_arrow").css({"display": "none"}); 

    } else { 
     $("#down_arrow").css({"display": "block"}); 
    } 
} 

Wie die Pfeile bleiben auf der Seite, die ich sie automatisch benötigt, um ihre Verbindungen zu aktualisieren, je nachdem, welche Seite sie aktuell waren. Wenn der Pfeil angeklickt wird, erstellt er basierend auf seiner aktuellen Seite (PN) +/- 1 eine Variable für die Seite, zu der er gehen soll. Diese Variable wird dann als ID zum Scrollen verwendet.

$(document).ready(function() { 

    $('.up_arrow').click(function() { 
     checkArrows(); 
     var gotopage = "#page" + (PN);   
     $('#wrapper').scrollTo(gotopage, 1000);  
     checkArrows();  
     return false; 
    }); 

    $('.down_arrow').click(function() { 
     checkArrows(); 
     var gotopage = "#page" + (PN);   
     $('#wrapper').scrollTo(gotopage, 1000);  
     checkArrows();  
     return false; 
    }); 
}); 

Dieser Code unten Auto-Rollen auf die Seitenzahl es aktuell ist, wenn der Bildschirm, da sonst die anderen Seiten der Größe verändert wird, die durch leicht zum Fenster Wechsel fließt versteckt ist.

function init() { 
    $('#wrapper').scrollTo('#page1', 0) 
    } 

    function resizeGoTo() { 
    var gotopage = "#page" + (PN); 
    $('#wrapper').scrollTo(gotopage, 1000); 
} 
    $(window).resize(function() { 
     resizeGoTo(); 
}); 

EDIT: War besorgt, wenn sie von einer 2 ‚Seite‘ Datei zu mehr, aber nur versucht, dies mit auf eine Datei mit mehreren (versteckt) ‚Seiten‘ und es funktionierte in Bewegung!

EDIT v2: Habe den Code für die Pfeiltasten geändert. Es verwendet, um den Link href im HTML zu bekommen, dann aktualisieren Sie es auf der Grundlage der js-Berechnungen; jetzt stört es nicht und es scrollt gerade zum div, das von den js Berechnungen erhalten wird. Haben Sie auch Auto-Bildlauf für Fenstergröße neu hinzugefügt.

Danke und hoffe, ich habe SO Gerechtigkeit mit meiner d.i.y Antwort!