Navigate through sections with the up and down keyboard arrows

Design help General
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