开发者

Adding keyboard control to ScrollTo Post

开发者 https://www.devze.com 2023-03-22 15:19 出处:网络
I\'m using this scrollTo script from webdesignerwall, and trying to add keyboard control. The original script:

I'm using this scrollTo script from webdesignerwall, and trying to add keyboard control.

The original script:

$(function () {
    function scroll(direction) {
        var scroll, i, positions = [],
            here = $(window).scrollTop(),
            collection = $('.post');

        collection.each(function () {
            positions.push(parseInt($(this).offset()['top'], 10));
        });
        for (i = 0; i < positions.length; i++) {
            if (direction == 'next' && positions[i] > here) {
                scroll = collection.get(i);
                break;
            }
            if (direction == 'prev' && i > 0 && positions[i] >= here) {
                scroll = collection.get(i - 1);
 开发者_如何学Python               break;
            }
        }
        if (scroll) {
            $.scrollTo(scroll, {
                duration: 750
            });
        }
        return false;
    }
    $("#next,#prev").click(function () {
        return scroll($(this).attr('id'));
    });
});

And for the keyboard control I try to add something like this:

$(window).keypress(function(event) {
    switch (event.keyCode) {
        case 38: // key is up
            return scroll($(this).attr('id'));
        case 40: // key is down
            return scroll($(this).attr('id'));
    }
});

Thanks for your help.


It should be:

$(window).keydown (function(event) {
    if (event.altKey) {
        switch (event.which) {
            case 78:  // Alt-N = next
            case 110: // Alt-n = next
                scroll ('next');
                break;
            case 80:  // Alt-P = prev
            case 112: // Alt-p = prev
                scroll ('prev');
                break;
        }
    }
})


See it in action at jsFiddle. (Click anywhere in the Result pane to activate keyboard control.)

Note: Don't override common UI keys, like the arrows, for things like this! It will play havoc with keyboard users (or all users if text boxes are ever used). Also, in this case, it will cause "jumpy" behavior anyway.

I've remapped the functionality to AltN and AltP.
(In the demo jsFiddle, I've left in the arrow keys, so you can see some of the problems with that mapping.)


With the help of Brock Adams this is the script completed:

function scroll(direction) {

    var scroll, i,
            positions = [],
            here = $(window).scrollTop(),
            collection = $('.post');

    collection.each(function() {
        positions.push(parseInt($(this).offset()['top'],10));
    });

    for(i = 0; i < positions.length; i++) {
        if (direction == 'next' && positions[i] > here) { 
scroll = collection.get(i); 
break; 
 }
        if (direction == 'prev' && i > 0 && positions[i] >= here) { 
scroll = collection.get(i-1); 
break; 
 }
    }

    if (scroll) {
        $.scrollTo(scroll, {
            duration: 700       
        });
    }

    return false;
}


$(function() {
    $("#next,#prev").click(function() {        
        return scroll($(this).attr('id'));    
    });
});


$(window).keydown (function(event) {
    if (event.altKey) {
        switch (event.which) {
            case 78:  // Alt-N = next
            case 110: // Alt-n = next
                scroll ('next');
                break;
            case 80:  // Alt-P = prev
            case 112: // Alt-p = prev
                scroll ('prev');
                break;
        }
    }
    else {
        switch (event.keyCode) {
            case 37: // key is left
        case 38: // key is up
                scroll ('prev');
                break;
            case 39: // key is right
        case 40: // key is down
                scroll ('next');
                break;
        }
    }
});
0

精彩评论

暂无评论...
验证码 换一张
取 消