Scroll posts using the keyboard?

Can you please provide a link to one of your posts? It would be helpful to see the ID or class associated with the nav links. Thanks.

You will need to add some jQuery to capture the key presses and interpret which key has been pressed. First, though, you should install a plugin which will allow you to add some script code. I like Header and Footer.

This is the basic code that will capture the N & P keys & navigate to either the new or previous post:

<script>
$(document).ready(function(){
   $("body").keydown(function(event){
      if(event.which == 78)  // N key
      {
         window.location = $(".newer a").attr("href"); //redirects to next post
      }
      else if(event.which == 80) // P key
      {
         window.location = $(".older a").attr("href"); //redirects to prev post
      }
   });
});
</script>

The selectors for the next and previous links, though, are probably different for your site, which is why I asked for a link to one of your posts.

Note, however, that this code will intercept all key presses. So if the user tries to enter a comment or reply on your post, or tries to enter something in a search field, any N or P press will take them to the Next or Previous post and they will be unable to finish entering their comment or search term.

It might be better to detect an Alt-N or Alt-P instead:

<script>
$(document).ready(function(){
   $("body").keydown(function(event){
      if(event.which == 78 && event.altKey)  // Alt-N key
      {
         window.location = $(".newer a").attr("href"); //redirects to next post
      }
      else if(event.which == 80 && event.altKey) // Alt-P key
      {
         window.location = $(".older a").attr("href"); //redirects to prev post
      }
   });
});
</script>

You should be able to navigate to the next & previous posts on my test site using the Alt-N & Alt-P keys.

Wow thanks. My site is pretty vanilla as I’m only using Twenty Fifteen for my theme. If you could tell me what you’re looking for and what I would have to modify in the script in case I switch themes that would be _much_ appreciated.

Here’s the link …

https://www.fightword.com/

I tried your code and unfortunately it did not work on my site.

I used the plugin that you mentioned it and added it into my header but no luck. Any ideas?

Sorry, for some reason I didn’t get an e-mail notification for your post a couple of days ago. What you are looking for are the classes or IDs of the elements which contain the navigation links. You can either do a view source or use a web debugging tool like Firebug or Chrome Developer Tools.

For TwentyFifteeen, in the above code, replace this bit:

.newer a

with this:

.nav-next a

and this:

.older a

with this:

.nav-previous a

On my site I don’t display the navigation links because the site is just one long page of posts.

Would it be possible to scroll via an element like “header” or something similar that marks the beginning of each of the posts?

OK, sorry, I didn’t read the original post carefully enough. I thought you wanted to scroll from within individual post pages, not up & down through the posts from the blog page. Let me take a look, it might be possible but a little more complicated.

Wasn’t as bad as I thought I would be. Replace all of the previous code with this:

<script>
jQuery(document).ready(function($){

var posts = $(".blog .hentry").toArray();
var current_post = 0;
var base_url = window.location + "#";

   // This bit of code will advance from the current post to the next or previous post by pressing the N or P keys
   $("body").keydown(function(event){
      if(event.which == 78 && event.altKey)  // Alt-N key
      {
         if (current_post < posts.length - 1)
         {
            ++current_post;
            window.location = base_url + $(posts[current_post]).attr("id");
         }
      }
      else if(event.which == 80 && event.altKey) // Alt-P key
      {
         if (current_post > 0)
         {
            --current_post;
            window.location = base_url + $(posts[current_post]).attr("id");
         }
      }
   });

});
</script>

This should allow you to scroll up & down through your posts from the home/blog page by pressing Alt-N (Next) or Alt-P (Previous).

That worked nicely (though I did switch it to the “up” and “down” key).

Is there anyway that it would be possible to get this working with the infinite scroll feature on? I may be asking for too much but figured it is worth a shot.

Thanks for your help.

Not really easy to do. You would have to modify the infinite scroll function to refresh the posts array after some posts were retrieved.

No worries then. Thanks for all your help.