0

問題のページのライブバージョンは次のとおりです：http：//agoodman.com.au/index1.html

Bootstrapを使用して1ページのWebサイトを構築しており、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();
          }
        });

これは、ほとんどの場合、機能します。ただし、解決したい問題が2つあります。

1.上/下を押すと、ページが1つ小さなジャンプで上下に移動し（Webサイトで矢印キーを押すように）、次のdivにスクロールします。event.preventDefualt（）;を入れてみました。jquery if / elseステートメントで、しかしそれは何もしませんでした。ここでデフォルトのアップ/ダウンアクションを防ぐ方法についてのアイデアはありますか？

2.「上」キーを押すと、ページが1つではなく2つのセクションを上にスクロールします。たとえば、「＃why」セクションに移動し、を押します。「#fees」までスクロールしてから、「＃howitworks」まで再度スクロールします。おそらくscrollspy.jsがここで競合していますか？

これで正しい方向に向けられていただければ幸いです。

乾杯

4

2 に答える 2

1

ページがスキップされる理由がよくわからないのは、ハッシュリスト内の検索と位置が原因​​である可能性があります。コード編成用の小さなスニペットを作成したので、現在の場所でデバッグしやすくなります。

編集：さて、私は最終的にそれが正しく動作するようにコードを修正しました。以前はうまくいかないと思っていましたが、巻物の扱い方の骨組みをお伝えしたいと思います。

ノート：

  1. $（ "a"）は、すべてのアンカーのリストをフェッチします
  2. window.location.hash.slice（1）は、リンクをクリックした場合に、現在使用しているハッシュを取得します
  3. branchs.indexは、現在使用しているアンカーのインデックスです（ステップ1から収集）
  4. branchs.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コードをWebページに配置します。

<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 に答える