The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

[Solved] Please help integrate keyboard nav to script…

  • # November 4, 2012 at 11:59 am

    Howdy all,

    Looking to integrate keyboard navigation to the following code. My goal is to mimic the behavior of the mouse wheel effect — with keyboard navigation (obviously).

    Any help/suggestions is greatly appreciated. Thanks.


    # November 4, 2012 at 1:05 pm

    This reply has been reported for inappropriate content.

    Solved this if anybody is interested. The following code is simply combined with the above jsFiddle. Cheers.

    $(window).keydown(function(e) {
    //prevent default arrow key behavior
    var $targetElement;
    if (e.keyCode == 39) {
    $targetElement = $(‘.active’).next(‘div’);
    else if (e.keyCode == 37) {
    $targetElement = $(‘.active’).prev(‘div’);

    if (!$targetElement || !$targetElement.length===0) {

    //scroll element into view
    $(‘html, body’).clearQueue().animate({
    scrollTop: $targetElement.offset().top
    }, 1000);

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed