Question

I want my Left/Right arrow to go to the Next/Previous .embedded_post div. The problem is that it only works once and I can only scroll between the first and second div. I thought it was the offset of -100 but removing the offset did not do the trick. I’m thinking that after I animate to the next div, the jQuery selector has not moved anywhere so I’m stuck.

jQuery(document).keydown(function(e){
    switch(e.which) {
        case 37: // left
            jQuery('html, body').animate({scrollTop:jQuery('.embedded_post').prev().offset().top - 100}, 500);          
            return;
        break;

        case 38: // up
        break;

        case 39: // right
            var next_embed = jQuery('.embedded_post').next();
            jQuery('html, body').animate({scrollTop:next_embed.offset().top - 100}, 500);
            return;
        break;

        case 40: //down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault();
});

Answer 1

.offset() will just return the position of the first element of the list if the selector returns multiple elements. Try adding/removing a .current class to the element you’re currently focused on and get the next/prev of that:

jQuery('.embedded_post:eq(0)').addClass('current');

jQuery(document).keydown(function(e){
    switch(e.which) {
        case 37: // left
            var $current = jQuery('.embedded_post.current'),
                $prev_embed = $current.prev();
            jQuery('html, body').animate({scrollTop:$prev_embed.offset().top - 100}, 500);
            $current.removeClass('current');
            $prev_embed.addClass('current');
            return;
        break;

        case 38: // up
        break;

        case 39: // right
            var $current = jQuery('.embedded_post.current'),
                $next_embed = $current.next();
            jQuery('html, body').animate({scrollTop:$next_embed.offset().top - 100}, 500);
            $current.removeClass('current');
            $next_embed.addClass('current');
            return;
        break;

        case 40: //down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault();
});