Jquery 方向键导航

Question

我是 jquery 编程的新手。我想要做的是让页面向下滚动到下一个“容器”类，每次我按下向下箭头，然后用向上箭头反转。我尝试了很多谷歌搜索，但我似乎找不到可管理的解决方案。

这是我的 HTML 代码:

<div class="containers">
    <div class="boxed" class="container">
        <p class="overskrift1">Internet Kriminalitet</p>
        <div id="demo"></div>
    </div>
    <div class="boxed2" class="container">

    </div>
</div>

我希望箭头键在不同的容器之间导航。

编辑

这可能是迄今为止我拥有的最好的 jquery 代码:

$('body').on('keypress'), (function () {
var ele = $(this).closest("section").find(".container");
$("body").animate({
scrollTop: $(ele).offset().top
                }, 100);
return false;

});

谢谢

• 莫腾

Answer 1

你要做的是:

• 在监听体上放置一个事件keypress

• 切换键以获取按下的箭头。 (37、38、39、40 => 左、上、右下)。

• 当按下该键时，您必须将页面 scrollTop 设置为动画到元素顶部。

类似于:

var containers = $('.container');
var currentContainer = containers.get(0);
$('body').on('keydown', function (e) {
    e.preventDefault();
    console.log(e.which);
    switch (e.which) {
        case 37:
            // left
            break;

        case 38:
            // up
            currentContainer = currentContainer.prev();
            break;

        case 39:
            // right
            break;

        case 40:
            // down
            currentContainer = currentContainer.next();
            break;

        default:
            return; // exit this handler for other keys
    }
    $('body').animate({
        scrollTop: currentContainer.getPosition().top + 'px'
    });

});

http://jsfiddle.net/9qhgsysg/1/