【问题标题】:scrollTo next/prev anchor using arrow keys or button?使用箭头键或按钮滚动到下一个/上一个锚点?
【发布时间】:2012-01-14 18:46:57
【问题描述】:

我已经在谷歌上搜索了一个星期,我只是不明白如何将它们结合起来:(

我正在制作一个类似于this 的横向网站,但我希望能够使用箭头键在类似于this 的横向页面的各个部分之间来回移动。

相关研究我发现了以下几页:

我能想到的最好的就是这个,但它不起作用:

$(document).bind('keydown',function(evt) {
        switch(evt.keyCode) {
        case 37:
              evt.preventDefault(); 
              $.scrollTo('+=564px', 800, { axis:'x' }); 
                    break;
                }
});


$(document).bind('keydown',function(evt) {
        switch(evt.keyCode) {
                    case 39:
              evt.preventDefault();
              $.scrollTo('-=564px', 800, { axis:'x' });
                    break;
                }
});

难道没有一种方法可以创建可以使用箭头键或单击箭头按钮滚动到的锚点或 div 类吗?我很迷失在这里。也许我要求太多,但如果有人能指出我正确的方向,我将不胜感激,谢谢:)

【问题讨论】:

  • 为什么不能发布代码?看看你已经拥有什么真的很有帮助。
  • 感谢您的回复,使用我的代码更新并立即阅读回复...

标签: jquery scrollto


【解决方案1】:
$('document').keypress(function(e) {
   if (e.which == 38) {
       //scroll up
   } else if (e.which == 39) {
       //scroll right
   } else if (e.which == 40) {
       //scroll down
   } else if (e.which == 37) {
       //scroll left
   }   
});

使用.animate() 做滚动效果,使用e.preventDefault(); 防止每个 if 块中的键默认移动。

【讨论】:

    【解决方案2】:

    以下代码将检测左/右箭头按键:

    $("body").keydown(function(e) {
        if (e.which == 37) { 
            // left arrow pressed
        }
        else if (e.which == 39) { 
            // right arrow pressed
        }
    });
    

    您只需为每个条件添加幻灯片逻辑。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-12-27
      • 2013-02-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-10-25
      • 2018-05-19
      • 2021-10-12
      相关资源
      最近更新 更多