视图端口中的jquery最近的锚点

Question

我开发了一个只有一页的网站，在这个网站上，我希望允许2幅图像在固定位置作为“操纵杆”，以便在mouseover上进行向上向下的导航，我可以使用jquery .scroll()方法和jquery 滚动到插件轻松地管理这一点。

在这个页面上，我有几个锚点，我想要多一种行为--当用户单击向上或向下箭头时，我希望页面滚动到页面上最接近的锚点--当用户单击" up “按钮时，前一个锚点，以及当用户单击向下箭头时最接近的”锚“。

由于我的滚动体是固定位置的，所以.closest() jquery方法不能工作。有办法找出视图中最近的锚点吗？

JS小提琴：

http://jsfiddle.net/8vW6n/1/

如有任何帮助，将不胜感激。

Answer 1

你可以试试这样的方法：

$(".joystick .down").click(function(){
    var anchors = $('.page > a');
    var anchorPositions = [];
    anchors.each(function(ind, anch){
        anchorPositions.push(anch.getBoundingClientRect().top);
    });
    var i;
    for(i=0;i<anchorPositions.length;i++)
        if(anchorPositions[i] > 0) break;

    console.log(anchors.eq(i));
    //anchors.eq(i) is the closest anchor
});

http://jsfiddle.net/3kTHa/2/

Answer 2

    var index = 1;
    $(function () {
      $(".joystick .up").hover(function () {
       index--;
       anc = "#anchor" + index;
       if ($(anc).length) {
          $('html, body').animate({
            scrollTop: $(anc).offset().top
          }, 2000);
       } else {
          index++;
       }
    }, function () {
  });    
 $(".joystick .down").hover(function () {
    index++;
    anc = "#anchor" + index;
    if ($(anc).length) {
        $('html, body').animate({
            scrollTop: $(anc).offset().top
        }, 2000);
    } else {
        index--;
    }
}, function () {
  });
});

$("#button").click(function () {
   $('html, body').animate({
     scrollTop: $("#elementtoScrollToID").offset().top
  }, 2000);
});

JSFIDDLE:

http://jsfiddle.net/dreamweiver/8vW6n/15/

快乐编码:)