带键盘的jquery滚轮鼠标滚轮答案

【问题标题】：jquery scroller mousewheel with keyboard带键盘的jquery滚轮鼠标滚轮
【发布时间】：2013-05-13 07:45:30
【问题描述】：

我目前有一个滚动网站这是我正在尝试将键盘键上下添加到以下代码的文章

[http://jsfiddle.net/roXon/r3x7r/1/]

Control page scroll animation with mousewheel

如果可能的话，请任何人告诉我..

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

希望对你有帮助，

http://jsfiddle.net/r3x7r/274

添加了用于在页面部分中滚动的键盘快捷键。

// OUR CODE
var winH = $(window).height();
$('.page').height(winH);

var c = 0;
var pagesN = $('.page').length;

var activePage=0;
$(document).bind('mousewheel', function(ev, delta) {

    delta>0 ? --c : ++c ;    
    if(c===-1){
        c=0;
    }else if(c===pagesN){
        c=pagesN-1;
    }
    activePage = c;
    var pagePos = $('.page').eq(c).position().top;       
    $('html, body').stop().animate({scrollTop: pagePos},{easing: 'easeInCirc', duration: 1200});
    return false; 

});

$(document).bind('keyup', function(event){
    console.log(event);
    if(event.which == 40) {
        activePage = activePage+1;
        var pagePos = $('.page').eq(activePage).position().top;       
        $('html, body').stop().animate({scrollTop: pagePos},{easing: 'easeInCirc', duration: 1200});
    } else if(event.which == 38) {
        activePage = activePage-1;
        var pagePos = $('.page').eq(activePage).position().top;       
        $('html, body').stop().animate({scrollTop: pagePos},{easing: 'easeInCirc', duration: 1200});
    }

    return false;
});

【讨论】：

这正是我正在寻找的 - 可以修改它在这个小提琴中的设置方式吗？ jsfiddle.net/roXon/r3x7r/102
@Kasper Bjerre 你想让我为提供的小提琴“/102”添加键盘事件吗？
那太棒了:) - 小提琴是由 roXon 制作的，我在这里找到了它stackoverflow.com/questions/11171828/…
看看这个小提琴，http://jsfiddle.net/r3x7r/275/
非常感谢，非常感谢您的帮助。但是，如果在鼠标滚轮和箭头键之间切换似乎会出现问题 - 如果您从箭头键开始，然后切换到鼠标滚轮（或相反），它会丢失您当前所在的部分。我也试图从第二部分开始 - 使用锚可以正常工作 - 但给我同样的问题：当我之后导航时，导航不“知道”我在页面上的位置。