jQueryの巧妙な次と前のボタン

Question

私は「down」を押すと自動的に次のID（オーバーフローのために表示されないセクション：hidden）までスクロールするWebページを作成しました。 'up'を押すとスクロールアップします。

現在のところ、矢印はWebページに特定のdivに移動するように指示しています。 「下向きの矢印は」

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

私は私が望むものをより多くのページを持つことになるので、これはしかし、わずか2ページのokですが、ページの量を指定し、矢印は、自動的にそのを変更するためにできるようにすることですと言いますリンクするには、次へ進む必要があります。

たとえば、「上向き矢印」は表示されず、「下向き矢印」を押すと＃page2にスクロールし、「上向き矢印」が表示されます。 に今すぐを押すと、＃page3に移動し、ページ3が最後のページになると非表示になります。

私は、ページの量を指定する 'var'を作成する必要があると推測しています。矢印を非表示にすると、CSSプロパティ 'display'がnoneに変更されますが、これを行う方法はわかりませんリンクが次の番号に移動するようにすることもできません！

編集V2： var PA = $('.page').length;にはないいくつかの理由について

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

を（これはあなたの答えから実装の助けを持つ現在のコードである私は、部分的に矢印が表示され、このコードで消えるように管理しています。）私はHTMLファイルに2回出現していても、どんな値も返すようです。このスクロールの面で

はコード

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

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

     current = $(this); 

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

     return false; 
    }); 

の抜粋であり、現在のhref #pageは＃のページ2になるようにPN + 1で「HREF」か何かを更新する方法を見つけようとしています

ありがとうございました。

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（簡体字）：

<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は、矢印を隠すことのない素晴らしいデモです！見てみな！ ;）

とscrollTopスプライトを使用してちょうど別のdemoと1つの少ないHTML要素

Answer 2

と彼の答えのためのロコにまず大規模なおかげで、それなしで私は私の方法「を試さとerror'ed」ができませんでしたスルー！ 第二に、おそらく非常に基本的なものだと私は謝罪します。それはおそらく私が書いた/微調整した最初のjavascriptのものであるため、おそらく非常に乱雑になるだろうからです。 でもokie dokeはここに行きます！

変数が定義されているページ番号はPNです。最初のページでは関数が実行され、上矢印が非表示になり、最後のページでは下矢印が非表示になります。最後のページは、現在のhtmlファイルのグローバル変数（PA）によって決まります。

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

矢印がページ上に残っているので、現在のページに応じて自動的にリンクを更新する必要がありました。矢印をクリックすると、現在のページ（PN）+/- 1に基づいて移動するページの変数が作成されます。この変数は、次にスクロールするIDとして使用されます。

$(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; 
    }); 
}); 

それは画面が少しによるウィンドウの変化に上を流れる隠されているそれ以外の場合は、他のページとサイズが変更されたときに現在のページ番号に自動スクロール下にこのコード。

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

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

編集：それ以上に2「ページ」ファイルから移動するときに心配していたが、ただ、複数の付いたファイル（隠された）「ページ」に関するでこれを試してみました、それが働きました！

EDIT v2：矢印キーのコードを変更しました。それはhtmlのリンクhrefを取得してから、js計算に基づいて更新していました。今は気にせず、js計算から得られたdivにまっすぐにスクロールします。ウィンドウのサイズを変更するための自動スクロールも追加しました。

私はd.i.yの答えでSOの正義をしたことをありがとうと希望！