Question

以下是相关网页的实时版本：http://agoodman.com.au/index1.html

我正在使用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>

当您使用鼠标单击导航栏时，滚动工作正常，完全没有奇怪的行为。然后我使用这个jquery代码用键盘的向上/向下箭头控制导航栏：

$(document).keyup(function(e) {
          var p = $("li.active");
          if (e.keyCode === 38) {
          p.prev().find("a").click();
          } else if (e.keyCode === 40) {
          p.next().find('a').click();
          }
        });

这在大多数情况下都有效。但是，我想解决两个问题：

1。当向上/向下按下时，页面向上/向下移动一个小跳跃（就好像按任意网站上的箭头键一样）并且然后滚动到下一个div。我试过把event.preventDefualt（）;在jquery if / else语句中，但它没有做任何事情。关于如何防止默认上/下动作的任何想法？

2。按“向上”键会使页面向上滚动两个部分而不是一部分。例如，转到“#why”部分，然后按下。它滚动到“#fees”然后再次滚动到“#howitworks”。也许scrollspy.js在这里有冲突吗？

愿意在这一方面指出正确的方向。

干杯

Answer 1

不确定页面为什么会跳过，可能是因为查找以及您在哈希列表中的位置。我为代码组织编写了一个小片段，因此更容易调试你所在的位置。

编辑：好的，我最后修改了代码以使其正常工作。早些时候，我觉得它不会起作用，但我想给你一个如何处理卷轴的骨架。

注意：

$（“a”）获取所有锚点的列表
window.location.hash.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" ....>

然后在笔记的第1步中你可以做一个选择器：

 $(a) will then be $(a.links)

EDIT2 ：我编辑了上面的javascript来使用以下更改：

我找到了一种使用scrollspy的不幸方法。显然，他们使用原型来包装他们的功能，你真的不能直接调用这些方法。所以解决方法就是：

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

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

然后打开scrollspy，进入原型，它会让你“激活”并输入以下代码：

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

在线上方：

active.trigger('activate')

Answer 2

使用keydown。然后，return true和e.preventDefault()将执行您想要的操作。

jQuery scrollTo.js键盘控制行为不端

2 个答案: