Bootstrap navbar dropdown menu focus control after the click

Daniel, here's a suggestion: link

$('.navbar-collapse').keyup(fazerScroll);

function fazerScroll(event) {
    if (!$('.navbar-collapse').is(':visible')) return;
    var navBar = document.querySelector('.navbar-collapse');
    var scrollAtual = navBar.scrollTop;

    var incremento = event.keyCode == 40 ? 100 : event.keyCode == 38 ? -100 : 0;
    if (!incremento) return;
    $(navBar).stop().animate({
        scrollTop: scrollAtual + incremento
    }, 500);
}

This code calls the fazerScroll() function each time a key is pressed within nav-bar . When the function opens it checks whether the dropdown is visible, otherwise it stops. Then measure the current position to scroll and increment 100px in case the loaded key is up and -100px in case it is low. Before doing the animation for the final position, check if there is an increment to avoid running the .animate() function. Note that I used .stop() to allow the animate to go back in another direction if I hit the keys fast, otherwise it would accumulate instructions and behave strangely

I do not know if this is what you need, but you can create a bind from the keyup event and check if the user has pressed the up or down arrows and scroll the screen:

$(document).keyup(function(event) {
  if(event.keyCode == 38) { // codigo da seta pra cima
    // faça a rolagem pra cima
  } else if(event.keyCode == 40) { //codigo da seta pra baixo
    // faça a rolagem pra baixo
  }
});

To make the scrolling of the screen to some element you can use the scrollTop method of jquery:

$('html, body').animate({
    scrollTop: ($('seletor-do-elemento').offset().top)
},500);

So guys, I just found an answer.

Click here to view jsfiddle

I ended up capturing the onclick event from the menu.

I prevent this event from spreading.

And I control the opening and closing of the menu at hand.

For this, I had to remove the data-toggle attribute from the menu.

Thanks for the help.