这是我已经拥有的：

Question

首先，我是JavaScript / jQuery的新手，英语不是我的母语。

在这种情况下，除了jQuery / JavaScript之外我不能使用任何东西（我的意思是没有其他插件/库，我自己没有编写任何代码）。

我想创建一个带箭头键导航的网站，使用溢出：隐藏在我的身体上，以及scrollTop。

这是我已经拥有的：

<div id="slide1">
    <div id="states">
        <div id="selector"></div>
        <div id="state1"><p>INTRO</p></div>
        <div id="state2"><p>STAGE 1</p></div>
        <div id="state3"><p>STAGE 2</p></div>
        <div id="state4"><p>STAGE 3</p></div>
    </div>
</div>

<div id="slide2">
</div>

<div id="slide3">
</div>

<div id="slide4">
</div>

正如我随机命名，我将不得不解释： - slide1是我的第一个“状态”或“屏幕”。这是一个很大的容器，我在其中提供了有关如何浏览网站的信息，因为这是用户将看到的第一件事，我们直接登陆该状态。 - 幻灯片2,3,4：其他大块将看到他们是否一步一步浏览网站。 - 状态1,2,3,4是文档顶部的按钮（位置：固定）。通过单击它，用户可以跳转到幻灯片1,2,3或4。 - 选择器只是一个设计的东西，如果你在幻灯片x上，他把自己置于状态x，它向用户显示他在页面中的位置。

现在是JQuery部分：

我使用的变量：

var pressedKeys = {};
var state = [0,1200,2400,3600];
var slidestate = [0, 25, 50, 75];
var n = 0;

var state：包含我用于scrollTop的数组值（现在每个都是1200px的高度。） var slidestate：在数组中包含值我的选择器（显示用户所在的位置）margin（以％为单位）

获取keyCode：

$(document).keyup(function(e) {
if (e.keyCode == 40 || e.keyCode == 39) {
    n++;
    if (n>3){n--;}
}
else if (e.keyCode == 37 || e.keyCode == 38){
    n--;
    if (n<0){n++;}
    }

所以n =我所在的州。我不希望它是＆lt; 0或＆gt; 3这就是为什么我在这种情况下使用“if n＆gt; 3 n--”，因为我只有4个状态（我的数组以0索引开头，所以0 1 2 3 =我需要的4个状态）。

使用var n滚动（键盘）：

$("html:not(:animated),body:not(:animated),#basmontagne:not(:animated)").animate({

     scrollTop:state[n]
     },1000);

$(" #selector ").animate({left:slidestate[n]+'%'},1000);

});

我认为我不必在这里解释任何内容，我使用n作为我的数组的索引，其中包含我需要的每个州的值。动画持续时间为1秒。

使用var n滚动（.click事件）：

$("#state1").click(function() {
        n=0;

        $("html:not(:animated),body:not(:animated),#basmontagne:not(:animated)").animate({
        scrollTop:state[n] },1000); 

    $(" #selector ").animate({left:slidestate[n]+'%'},1000);
});

与下面相同，但是我和onClick事件。

问题

以下代码正常运行。但是有一些我无法解决的问题。这一切看起来都很迟钝，有时候scrollTop似乎无法正常工作;

案例1：我处于第4状态，按“向下”箭头键一次，然后按“向上”箭头键一次。它应该跳到状态3，但它没有。我必须再次按“向上”，然后它跳到状态2.那到底是什么？

案例2：我不知道为什么但有时候，当我浏览网站时，选择器会移动，但scrollTop不会做任何事情。所以我的选择器进入状态3，我只处于状态1.再次是什么？对于scrollTop和selector，它应该是n的相同值，我不明白为什么它都像这样被窃听。

有人对此有任何想法吗？

Answer 1

好的，所以我无法清楚地理解你在极端情况下想要做什么，即n> 3且n <0。如果您的尝试只是什么都不做，那么您可以通过使用

来减少该位的冗余

if ((e.keyCode == 40 || e.keyCode == 39) && (n < 3))
    n = n + 1;
else if ((e.keyCode == 37 || e.keyCode == 38) && (n > 0))
    n = n - 1;

代替，

if (e.keyCode == 40 || e.keyCode == 39) {
    n++;
    if (n>3){n--;}
}
else if (e.keyCode == 37 || e.keyCode == 38){
    n--;
    if (n<0){n++;}
}

使它更具可调试性，

来到你的主要问题...... 案例1和案例2是由于同样的问题，实际上不是问题，而是使用不当的东西。

:animated过滤器，read more about animated filter

所以通过写作， $("html:not(:animated),body:not(:animated),#basmontagne:not(:animated)") .animate({ scrollTop:state[n] },1000);

您正在选择不在动画中的html，body和#basmontagne元素。

n和scrollTop的值一直没有同步的问题，当n的值在动画中间改变时恰好发生，因为html，body等处于动画中时刻并被jQuery选择器跳过，因此动画回调在该实例中不起作用。

在this fiddle here中，如果您打开控制台，您将看到n的值，并且scrollPosition始终在轨道上。

如果在您的代码中这不起作用，可能是因为var n是全局定义的，而其他一些代码段正在修改它。

最后，您可能还想检查jQuery中的.stop()，这可能会让动画变得更好。

希望有所帮助。!!

使用scrollTop进行错误的箭头键导航

这是我已经拥有的：

现在是JQuery部分：

我使用的变量：

获取keyCode：

使用var n滚动（键盘）：

使用var n滚动（.click事件）：

问题

1 个答案: