Navigate through sections with the up and down keyboard arrows

Design help General
1

Hi Webflow,

Is it possible to go to the next or previous section when I hit the down or up button on my keyboard

Here is my public share link: https://preview.webflow.com/preview/letsgro-designpresentatie?preview=9cf984d9f68776aa7a33e10ff42d812b

Thanks!

2

It’s possible but no with Webflow only, you need some Javascript custom code.

You need to find a javascript custom code for that. A program that will read the html and list the desired tags (ie top level <section> element with an ID), then binds the up and down arrow key to a previous/next section function.

I don’t have such code and I’m not a programmer.

However I can show you how looks a code to bind a key to a click on an element. So I have created elements, gave them an ID and applied a Webflow interaction to them. By clicking the letter “n” (if(e.keyCode==110))in the keyboard, it launches WF interactions (opens and closes a popup)

<script>
Webflow.push(function() {
	$('body').keypress(function(e) {
		if(e.keyCode==110) {
      if($('#notes-overlay').css('display') == 'block') {
        $('#closefootnotes').trigger('click');
      } else {
        $('#footnotes').trigger('click');
      }
    }
  });
});
</script>

The script says: If the #notes-overlay element is display:block, then click on the #closefootnotes element. If not, then click on the #footnotes element.

Which in english means: if the popup is open then click on the close button to trigger the close interaction. If the popup is closed, then open it by clicking on the open popup link.

@bart wrote the script for me.

1 Like
3

Hey @martijnrunia it looks like fullpage.js could be something for you.

4

Hi Vincent,

Thanks for your reply. But unfortunately that’s not the kind of effect i’m aiming for. I also want the user to scroll through the site as well. I will have a look at some javascript code.

5

Hi Sidney,

Thanks yes it is. Tried it but somehow i can’t get it to work. Can you have look what i do wrong?

6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.