jQuery scrollTo.js键盘控件行为异常

这里有一个有问题的页面的实时版本：

我正在使用Bootstrap构建一个单页网站，scrollTo用于向上/向下滚动不同的部分。顶部有一个导航栏，其代码为：

<ul class="nav">
  <li class="active"><a href="#intro" onclick="$.scrollTo( '#intro', 600 );">Top</a></li>
  <li><a href="#service" onclick="$.scrollTo( '#service', 600 );">What we do</a></li>
  <li><a href="#howitworks" onclick="$.scrollTo( '#howitworks', 600 );">How it works</a></li>
  <li><a href="#fees" onclick="$.scrollTo( '#fees', 600 );">Our fees</a></li>
  <li><a href="#why" onclick="$.scrollTo( '#why', 600 );">Why do it?</a></li>
  <li><a href="#map" onclick="$.scrollTo( '#map', 600 );">Map</a></li>
  <li><a href="#contact" onclick="$.scrollTo( '#contact', 600 );">Contact</a></li>
</ul>​

这在很大程度上是可行的。但是，我想解决两个问题：

1.按向上/向下键时，页面会向上/向下移动一小步（就像在任何网站上按箭头键一样），然后滚动到下一个分区。我尝试放置event.preventedfualt（）；在jqueryif/else语句中，但它没有执行任何操作。关于如何防止这里的默认向上/向下操作，有什么想法吗

2。按“向上”键可使页面向上滚动两个部分，而不是一个部分。例如，转到“#为什么”部分，然后按向上键。它滚动到“#费用”，然后再次滚动到“#如何工作”。也许scrollspy.js在这里有冲突

如果能在这个问题上指出正确的方向，我将不胜感激

---

干杯

不太清楚页面为什么会跳过，可能是因为查找结果以及您在哈希列表中的位置。我为代码组织编写了一个小片段，以便在您所在的位置进行调试

编辑：好的，我最终修改了代码，使其正常工作。早些时候，我觉得这样做行不通，但我想给你一个如何处理卷轴的框架

注:

$（“a”）获取所有锚点的列表

slice（1）获取当前所在的哈希值，以防单击链接

anchors.index是您所在锚的索引（从步骤1收集）

anchors.get只获取下一个位置

currentHash.hash是从中获取的下一个地址的哈希

var anchors = $("a.links");
var currentPos = 0;
var nextPos = 0;
var current = window.location.hash.slice(1); //get current hash;

$('#navbar').scrollspy();

$(document).ready(function(){       
    $(document).keyup(function(e){
         e.preventDefault();
        currentPos = anchors.index($('a[href$="' + $('input[name="hash"]').val() + '"]'));
        //currentPos = anchors.index($('a[href$="' + current + '"]'));
         if(e.keyCode === 38){
            scrollUp(currentPos);
         } else if (e.keyCode === 40){
            scrollDown(currentPos);
         }

    });

    function scrollUp(pos){
        currentHash = anchors.get(pos-1);
        if(!(currentHash===undefined) && (pos-1) >= 0){
            current = currentHash.hash;
        }
         $(document).scrollTo(current,600);

    }

    function scrollDown(pos){
        currentHash = anchors.get(pos+1);
        if(!(currentHash===undefined)){
            current = currentHash.hash;
        }
         $(document).scrollTo(current,600);
    }
});

提示：

我会将一个类与您的链接相关联，如：

 <a class="links" href="#service" ....>

EDIT2：我编辑了上述javascript以利用以下更改：

我发现了一个使用scrollspy的不幸方法。显然，他们使用原型来包装他们的函数，而你真的不能直接调用这些方法。因此，解决办法是：

将此html代码放入您的网页：

<input type="hidden" name="hash" value="" />

线以上：

active.trigger('activate')

---

使用

向下键

。然后

返回true

和

e.preventDefault（）

将执行您想要的操作。

Hah。关于我的拼写你是对的。但是，您的代码在chrome中不起作用，事实上完全禁用了键盘控件。设置var current=window.location.hash.splice（1）——我不熟悉它的作用，但我假设它得到了当前的窗口位置——似乎比当前的设置效率低。我正在使用ScrollSpy，它将导航栏的当前位置设置为li.active，因此我正在使用它来控制页面。请看我的新编辑，我必须获取您使用的插件，并花了大约20分钟来修改它：）我添加了一些限制，这样它可以处理未定义的内容，并且可能超出列表。我也得去拿scrollspy，因为我很确定它会回到原来的位置。当你得到它时，你可以简单地附加到上面的代码中。好的，我添加了一个解决方法，你需要稍微修改scrollspy，它只有一行代码。在原型的activate函数中，它使用一个名为“this.activeTarget”的变量，该变量在每次通过页面的某个部分时都会被调用。该值将被放入隐藏的html输入中。javascript中的代码将利用这个新值。顺便说一句，我已经测试了我在环境中放置的代码，它可以正常工作。我曾尝试从scroll spy的活动函数中获取变量，但显然您无法捕获该事件（尽管在他们的网站上提到了该事件，但他们没有显示任何示例，而且人们也遇到了问题）。然而，还有另一个scrollspy，看起来他们做得很好，但它是通过Mootools完成的，而不是Jquery。如果我是你，我会试一试的。您可以创建scrollspy对象，并从中获取事件，这要容易得多：

<input type="hidden" name="hash" value="" />

$('input[name="hash"]').val(this.activeTarget);

active.trigger('activate')