如何在jQuery或Javascript中将向上箭头绑定到“向上滚动”和向下箭头绑定到“向下滚动”？答案

【问题标题】：How to be bind up arrow to "scroll up" and down arrow to "scroll down" in jQuery or Javascript?如何在jQuery或Javascript中将向上箭头绑定到“向上滚动”和向下箭头绑定到“向下滚动”？
【发布时间】：2017-09-02 05:30:14
【问题描述】：

如何绑定向上箭头（或任何其他键）以执行与使用 jQuery 或 Javascript 以编程方式向上滚动相同的工作？

我正在使用此代码来检测向上和向下箭头单击：

$(document).keydown(function(e) {
    switch(e.which) {
        case 38: // up
        console.log("up");

        break;

        case 40: // down
        console.log("down");
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

因此，在这种情况下，当我单击向下箭头时，它应该调用“鼠标向下滚动”。

原因：我可以通过在移动设备上上下滑动以及鼠标滚动来滚动浏览我网站上弹出模式中的内容。如果您有笔记本电脑但没有鼠标怎么办？向上/向下箭头不起作用...

【问题讨论】：

这很复杂。滚动就像调整大小不是一个，而是几千个像素一个像素的事件......
您的代码在向上和向下箭头上工作正常（我检查了它，它在控制台中记录正确）。那你有什么问题
How to scroll to an element inside a div?的可能重复
@AlivetoDie - 单击向下箭头时，我想调用“鼠标滚动”而不是控制台日志记录“向下”。
我可能遗漏了一些东西，但是向上/向下箭头键已经在我的浏览器中执行滚动...

标签： javascript jquery

【解决方案1】：

我相信箭头键应该已经可以用于滚动（无论如何它在 Stack Overflow 上都对我有用！），但如果没有，我相信“scrollTo”方法可以为您工作：

var startingY = 0;

$(document).keydown(function(e) {
    switch(e.which) {
        case 38:
        startingY -= 20;
        window.scrollTo(0, startingY);
        
        break;

        case 40: 
        startingY += 20;
        window.scrollTo(0, startingY);
        
        break;

        default: return;
    }
    e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:5000px"></div>

【讨论】：