Docs

[belayachimarouane]

Hello,

My website is made of full height sections and I want to be able to navigate from a section to another by hitting up and down keyboard shortcuts.
I used this JS code but it doesn’t seem to work :

function scrollToAnchor(aid){
$('html,body').animate({scrollTop: aid.offset().top},'slow');

}

var i = 1; $(document).keydown(function (event) {

if (event.keyCode == 38) {
        i--;
        scrollToAnchor($("#Section"+i+""));
 } else if (event.keyCode == 40) {
        i++;
        event.preventDefault();
        scrollToAnchor($("#Section"+i+""));
    }
});

Any idea on how to make it work ?

Thanks a lot

[belayachimarouane]

The code finally worked by naming each section : Section1, Section2 ….
However when I press down or up with my keyboard it takes me a bit further than I want, and the menu isn’t calculated while scrolling with keyboard.

Any suggestion on how to solve it ?

Thanks a lot

[Jade]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[belayachimarouane]

Hello,

Here is the link http://garcondusiecle.com/

When you click on down or up with keyboard it works and takes you to the next section, however it goes so far and and the menu hides a part of the section.

Many thanks!

[Nabeel A]

Hi again,

Please try replacing your code with this one:

function scrollToAnchor(aid){
var headerHeight = $('.x-navbar').height();
$('html,body').animate({scrollTop: aid.offset().top - headerHeight },'slow');

}

var i = 1; $(document).keydown(function (event) {

if (event.keyCode == 38) {
        i--;
        scrollToAnchor($("#Section"+i+""));
 } else if (event.keyCode == 40) {
        i++;
        event.preventDefault();
        scrollToAnchor($("#Section"+i+""));
    }
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[belayachimarouane]

Hello, I have replaced it but the keyboard navigation isn’t working at all now..

Thanks a lot!

[Rad]

Hi there,

The naming is now #section instead of #Section. Please change this

scrollToAnchor($("#Section"+i+""));

to this.

scrollToAnchor($("#section"+i+""));

Thanks!

[belayachimarouane]

AMazing!!! Thanks a lot

[Paul R]

You’re welcome! 🙂

[Author]

Posts