视口(viewport)中jquery最近的 anchor

Question

我开发了一个单页网站，我想在其中允许 2 个固定位置的图像作为“操纵杆”以允许在 mouseover 上进行上下导航，我可以使用 jquery 轻松管理它>.scroll() 方法和 jquery scroll To plugin

在页面上，我有几个 anchor ，我想再有一种行为 - 当用户单击向上或向下箭头时，我希望页面滚动到页面上最近的 anchor - 当用户单击上一个 anchor 时当用户点击向下箭头时，点击“向上”按钮和最近的向下“ anchor ”。

由于我的滚动条是固定位置的，.closest() jquery 方法不起作用。有没有办法找出视口(viewport)中最近的 anchor ？

JS fiddle :

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/