You can use something like:

$(function(){
  $('.menu').find('a').on('click', function(e){
        e.preventDefault();
        $('.corpo').scrollLeft( $(this).data('scroll') );
    })
});

But for this to work you need to add the data-scroll property in the menu links by passing a value inside.

see here: link

Look at this demonstration link I made a site with this scheme and it's very cool

Here are some other examples of good, beautiful scripts link

If I get it right, you want the content of the page to slide sideways, hiding the content while the new page appears sliding on the opposite side, right?

For example: I click on "About Us", the "Home" page slides to the left side and disappears, the "Who We Are" page slides along the right side and appears, right?

If so, come on:

Note : I made the code in a hurry, you will have to tidy up, you can optimize the code, there it is with you.

You can view the demo by clicking here (I took the pen from @ user2084932).

CSS

.corpo{
  position: relative;
  width: 200px;
  height: 100px;
  overflow: hidden;
}

.content {
  animation-duration: .4s;
}

p {
  margin: 10px;
  padding: 5px;
  border: 2px solid #666;
}

.slideLeft {
  animation-name: kf_SlideLeft;
}

.slideFromRight {
  animation-name: kf_SlideFromRight;
}

@keyframes kf_SlideLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-2048px);
  }
}

@keyframes kf_SlideFromRight {
  from {
    transform: translateX(2048px);
  }

  to {
    transform: translateX(0);
  }
}

Javascript

$(function(){
  // A gente pega o delay no css. Se quisermos alterar a duração,
  // mudamos apenas no css.
  var delay = parseFloat($(".content").css("animation-duration").replace("s"));

  $("[href='#home']").click(function(e) {    
    $(".content").addClass("slideLeft");

    // Só devemos alterar o conteúdo APÓS a animação terminar, fazemos
    // isso multiplicando o delay por 1000.
    window.setTimeout(function() {
      $(".content").removeClass("slideLeft").addClass("slideFromRight");
      $(".content").html("<p>Home Content</p>");

      window.setTimeout(function() {
        $(".content").removeClass("slideFromRight");
      }, delay * 1000);
    }, delay * 1000);

    e.preventDefault();
  });

  $("[href='#quem']").click(function(e) {
    $(".content").addClass("slideLeft");

    // Vai executar assim que a animação terminar.
    window.setTimeout(function() {
      $(".content").removeClass("slideLeft").addClass("slideFromRight");
      $(".content").html("<p>Quem Somos - Content</p>");

      // Segundo timeout pra remover a classe.
      window.setTimeout(function() {
        $(".content").removeClass("slideFromRight");
      }, delay * 1000);
    }, delay * 1000);

    e.preventDefault();
  });
});

I think the code dispenses many explanations, because it is very simple and kind of self explanatory.

Basically, what makes the content slide is transform: translateX . Negative values and it will move to the left, positive values to the right.

What makes the sliding act "smooth" is the animation. If you only put transform , you will not see the content sliding, it will simply disappear.

Another way to make it soft would be to use transition , however, the slideFromRight animation would have to be done otherwise, because transition is just the way some properties would be transitioned, while animation I can control the initial and final values with from and to .

References:

CSS Animations
CSS Transitions CSS Transforms