jsBin DEMO 的

Question

我创建了一个网页，当你按下“向下”时会自动向下滚动到下一个ID（由于溢出而隐藏的部分：隐藏）当你按下“向上”它会向上滚动。

目前每个箭头只是告诉网页转到特定的div，例如“向下箭头”说

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

这只适用于两页，但因为我将拥有更多页面，我希望能够指定页面数量，并且箭头可以自动更改下一页需要的链接。

例如，在第1页上，“向上箭头”不可见，当您按下“向下箭头”时，它会滚动到＃page2，然后可以看到“向上箭头”。如果您现在再次按向下箭头，它将转到＃page3，然后它变为隐藏，因为第3页是最后一页。

我猜我需要创建一个'var'来指定页面的数量，并且要使箭头不可见，它会将css属性'display'更改为none但我不知道怎么做也不知道如何做使链接计算出下一个号码！

编辑V2：（这是当前代码已经实现了您的答案的帮助。我已经部分设法使箭头显示并消失此代码）

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

由于某些原因var PA = $('.page').length;似乎没有返回任何值，即使我在HTML文件中出现了2次。

就滚动而言，这是代码的片段

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

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

        current = $(this);

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

        return false;
    });

现在我正试图找到一种用PN + 1或其他东西更新“href”的方法，以便href #page成为＃page2

像往常一样非常感谢！

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 是一个不会隐藏箭头的漂亮演示！看看这个！ ;）

另一个 demo 使用scrollTop并减少1个HTML元素

Answer 2

首先非常感谢Roko的回答，没有它我无法通过“试验和错误”来完成！其次，我道歉，因为它可能是非常基本的东西，因为它可能会非常混乱，因为它是我写的/调整的第一个javascript的东西。但好吧，我去吧！

定义一个变量来确定它所在的页码，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页'文件移动到更多文件但只是在带有多个（隐藏）'页面'的文件上尝试了这个并且它有用了！

编辑v2：更改了箭头按下的代码。它用于获取html中的链接href，然后根据js计算更新它;现在它不打扰它只是直接滚动到从js计算得到的div。还添加了自动滚动窗口重新调整大小。

谢谢，并希望我已经用我的d.i.y答案做了正义！

在jQuery中聪明的下一个和上一个按钮

2 个答案:

jsBin DEMO 的