0

这是相关页面的实时版本：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 在这里发生冲突？

希望在这一点上指出正确的方向。

干杯

4

2 回答 2

1

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

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

笔记：

  1. $("a") 获取所有锚点的列表
  2. window.location.hash.slice(1) 获取您当前所在的哈希值，以防您单击链接
  3. anchors.index 是您所在的锚的索引（从第 1 步收集）
  4. anchors.get 只是获取下一个位置

  5. 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')
于 2012-07-19T01:57:31.210 回答
1

使用keydown. 然后要么return true做e.preventDefault()你想做的事。

于 2012-07-21T05:47:53.507 回答