3

jQuery のscrollToプラグインを使用して、上矢印と下矢印を使用してページを上下にスクロールしています。

クラス「画面」のdivがたくさんあるので、次のようにします。<div class="screen-wrapper">...</div>

私がやろうとしているのは、UPまたはDOWNを押すと、ウィンドウが「画面」のクラスで次または前のdivにスクロールすることです。

私はキープレスの世話をしています。プラグインのドキュメントによると、ウィンドウをスクロールするには、 $.scrollTo(...); を使用します。

ここに私が持っているコードがあります:

$(document).keypress(function(e){
    switch (e.keyCode) {
        case 40:    // down
            n = $('.screen-wrapper').next()
            $.scrollTo( n, 800 );
          break;
        case 38:    // up

          break;
        case 37:    // left

          break;
        case 39:    // right

          break;

    }      
});

それが役に立ったら、ここに HTML div があります。ページにこれらのいくつかがあり、基本的に、下矢印を押して次のものにスクロールしようとしています:

<div class='screen-wrapper'>
<div class='screen'>
    <div class="sections">
        <ul>
            <li><img src="images/portfolio/sushii-1.png " /></li>
            <li><img src="images/portfolio/sushii-2.png" /></li>
            <li><img src="images/portfolio/sushii-3.png" /></li>
        </ul>
    </div>

    <div class="next"></div>
    <div class="prev"></div>
</div>

また、必要に応じて、誰かがより良いアイデアを得るのに役立つ場合は、これが使用されているリンクを提供できます。

編集 そして、ここでの本当の質問が何であるかについて言及するのを忘れていました. 質問/問題は、セスが述べたように、最初の要素を超えてスクロールダウンしないことです。

4

2 に答える 2

5

ここに本当の質問はありませんが、問題はあなたのページが最初のページを過ぎてスクロールしないことだと思います. これは、キーを押すたびにこれを呼び出すためです。

            n = $('.screen-wrapper').next()

おそらく、呼び出すたびに同じものを返しています。インスタンス化をキープレスの外に移動してみてください。

          var s = $('.screen');
          var curr=-1, node;

          $(document).keypress(function(e){
             switch( e.keyCode ) {
               case 40:
                  node = s[++curr];
                  if (node) {
                    $.scrollTo( node,800);
                  }
                  else {
                    curr = s.length-1;
                  }
                  break;
                case 38:
                   node = s[--curr];
                   if (node) {
                     $.scrollTo( node ,800);
                   }
                   else {
                      curr = 0;
                    }
                   break;
                }
          });
于 2009-07-18T05:11:26.193 に答える
1

似たようなものを実装idし、各要素に属性を使用しました。

のようなことをしてみませんか

window.location.href = '#section-' + curr;

使用する代わりにscrollTo？

于 2009-07-18T05:57:38.300 に答える