Perform action by pressing key

Question

I need that when the user presses the DOWN key (down) of the keyboard, it goes to a div, in the same way as with scrollTop. Someone has done something like this using Jquery?

It would be something like this?

$(window).trigger('keydown', function (e) {
    if (e.which != 40) return false;
    var posicao = $('.homeBaixoRodapeTexto1').position().top;
    $('html, body').stop().animate({
        scrollTop: posicao
    }, 1500);
});

Answer 1

What you need to know is the position of the element you want to scroll to. This value can be found with the method .position() jquery:

var posicao = $('#destino').position().top;

To run the scroll only when the down key is pressed you can use so:

$(window).on('keydown', function (e) {
    if (e.which != 40) return false;

To use a smooth scroll you can use jQuery Animate() where you can turn off the speed in the second parameter of the function (in milliseconds). In this case I put 1 and a half seconds.

$('html, body').stop().animate({
    scrollTop: posicao
}, 1500);

Demo

The code I put in the demo:

$(window).on('keydown', function (e) {
    if (e.which != 40) return false;
    var posicao = $('#destino').position().top;
    $('html, body').stop().animate({
        scrollTop: posicao
    }, 1500);
});

---

Take a look in this question/answer which is related to yours if you want to see more examples of scrollTo.