title: increment html anchor with arrow key javascript and/or jQuery
body: <p>I making a little website where I must do like a powerpoint. I have multiple slides. I have hidden the scrollbar and diseable scroll. The only way to navigate between slide will be with arrow key and a link include in the slide.</p>
  
  <p>Here the HTML code :</p>
  
  <pre><code>  &lt;section id="s00" class="page slide"&gt;
  
      &lt;a href="#s01" class="nextSlide"&gt;&lt;/a&gt;
    &lt;/section&gt;
    &lt;section id="s01" class="page slide"&gt;
  
      &lt;a href="#s02" class="nextSlide"&gt;&lt;/a&gt;
    &lt;/section&gt;
    &lt;section id="s02" class="page slide"&gt;
  
      &lt;a href="#s03" class="nextSlide"&gt;&lt;/a&gt;
    &lt;/section&gt;
    &lt;section id="s03" class="page slide"&gt;
  
      &lt;a href="#s04" class="nextSlide"&gt;&lt;/a&gt;
    &lt;/section&gt;
  </code></pre>
  
  <p>I've successfully make an jQuery script working for navigate between slide with arrow key, but I'm not very good in javaScript and I want to know if there a more efficient/cleaner/short way to do the same thing. The idea is to modify the page anchor with the arrow key. Here my jQuery code :</p>
  
  <pre><code>$(document).ready(function(){
      function upDown($dir){
          $url = document.URL; /*The current URL ex: http://***/presentation#s02 */
          $anchorNum = parseInt($url.slice(-2), 10); /*Get the anchor number from the current url ex: 02*/
          $urlNoAnchor =  $url.slice(0, -2); /*Get the base url without anchor number ex: http://***/presentation#s*/
          if ($dir == "up") { /*Increment or decrement the anchor number, up because the previous slide is up */
              if($anchorNum &gt; 0){ /*We can't go under 0*/
                  $newAnchor = $anchorNum - 1;
              }
              else{
                  return;
              }
          } else{
              $newAnchor = $anchorNum + 1;
          };
          if ($newAnchor &lt;= 9) {$newAnchor = "0"+$newAnchor}; /*if the anchor is equal or smaller than 10, need to add zero for keeping two units*/
          window.location.replace($urlNoAnchor + $newAnchor); /*Finally, redirect to the next or previous anchor*/
      };
  
      $(this).keydown(function(e) {
          switch(e.which) {
              case 37: // left
                  upDown("up");
              break;
  
              case 38: // up
                  upDown("up");
              break;
  
              case 39: // right
                  upDown("down");
              break;
  
              case 40: // down
                  upDown("down");
              break;
  
              default: return; // exit this handler for other keys
          }
          e.preventDefault(); // prevent the default action (scroll / move caret)
      });
  });
  </code></pre>
  
  <p>Thank you for your suggestion/help for helping me make better code :)</p>
  
  <p>edit:
  -I Know my code is limit to two digit anchor (00 to 99) because of the way I get the anchor number from the URL. For my project, it's not a problem, I will never have 100 slides, but if you know a way to make it (0 to ∞) I'm interested to learn.
  - The parseint was also tricky for me to keep a leading 0, I don't know if I make it well.</p>
  
  <p>Here the page where the presentation is : <a href="http://dubebenjamin.com/presentation/presentation#s00" rel="nofollow">http://dubebenjamin.com/presentation/presentation#s00</a></p>
  
  <p>Finally, this is the code I have make after suggestions :</p>
  
  <pre><code>$(document).ready(function(){
      //Utilisation du clavier pour naviguer entre les slides
      $url = window.location;
  
      function upDown($dir){
          $hash =$url.hash.substring(1);
          $hashInt= parseInt($hash);
          if ($dir == "down") {
              $newAnchor = $hashInt + 1;
          } else if($hashInt &gt; 0){
              $newAnchor = $hashInt - 1;
          };
          window.location.hash = $newAnchor;
      };
  
      $(this).keydown(function(e) {
          $key = (e.which);
          if ($key == 37 || $key ==38) { // left or top
              upDown("up");
          } else if($key == 39 || $key ==40){ // right or bottom
              upDown("down");
          };
      }); 
  
  });
  </code></pre>