1

HTMLページを動的に生成し、矢印キーを使用して上下に移動し、上または下を押すたびに次のアンカーにスクロールできるようにしたいと考えています。

これが私のコードです（動作しません）

$(document).keydown(function(e){
    if (e.keyCode == 40) {
        console.log('keydown');
        if ( next === undefined ) {
            next = $('.js_anchor').next();
        } else {
            next = next.next();
        } 
        $(document).animate({scrollTop: next}, 2000,'easeInOutCubic');
    }
});

何か案は ？ありがとう ！

4

1 に答える 1

2

変数を使用してアンカーリストを保存し、次に次のように現在のキーインデックスを保存します。

$myAnchors = $('.js_anchor');
currentAnchor = -1;

$(document).keydown(function(e){
    if (e.keyCode == 40) {
        console.log('keydown');
        if ($myAnchors.length < currentAnchor+1) {
            currentAnchor++;
            $(window).animate({scrollTop: $myAnchors.eq(currentAnchor).offset().top}, 2000,'easeInOutCubic');
        }
    }
});

これは、ユーザーが自分でスクロールして下矢印を押すと、上にスクロールする可能性があるため、いくつかの悪影響があります...この関数を使用して、スクロール先を決定します。

function getAnchorOffset(prevnext){
    //prevnext = 'next' or 'prev' to decide which we want.
    currentPosition = $(window).scrollTop();
    for(k in $myAnchors){
        if($myAnchors[k].offset().top<currentPosition && $myAnchors[k].offset().top>closestOffset){
             closestOffset = $myAnchors[k].offset().top;
             key = k;
        }else if($myAnchors[k].offset().top>currentPosition){
            break;
        }

    }
    if(prevnext=='next'){
        return $myAnchors[key+1].offset().top;
    }else{
        return closestOffset; 
    }
}

そして交換してください

$(window).animate({scrollTop: $myAnchors.eq(currentAnchor).offset().top}, 2000,'easeInOutCubic');

に

$(window).animate({scrollTop: getAnchorOffset('next')}, 2000,'easeInOutCubic');

テストされていませんが、まだ機能していない場合は、ほぼ機能しているはずです。

于 2012-10-23T07:57:45.863 に答える