Edit in JSFiddle

$(function() {

    $(".navigator span").on("click", function() {

        var idx = $(this).index() + 1;

        $("html, body").stop().animate({
            scrollLeft: $("#num" + idx).offset().left
        }, 1000);

    });

});

<div id="container">
    <div id="num1" class="contents">
        <div class="navigator">
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>
    </div>
    <div id="num2" class="contents">
        <div class="navigator">
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>
    </div>
    <div id="num3" class="contents">
        <div class="navigator">
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>
    </div>
</div>

* {
  margin: 0;
  padding: 0;
}
#container {
  position: absolute;
  height: 100%;
  width: 12000px;
  overflow-x: hidden;
}
.contents {
  position: relative;
  float: left;
  width: 4000px;
  height: 100%;
  bottom: 0;
}
.contents:nth-child(1) {
  background: url(http://tympanus.net/Tutorials/WebsiteScrolling/images/black.jpg) no-repeat top right;
  background-color: #000;
}
.contents:nth-child(2) {
  background: url(http://tympanus.net/Tutorials/WebsiteScrolling/images/white.jpg) no-repeat top right;
  background-color: #fff;
}
.contents:nth-child(3) {
  background-color: #000;
}
.navigator {
  position: relative;
  top: 50%;
  left: 100px;
}
.navigator > span {
  color: #fff;
  font-size: 50px;
  margin-left: 30px;
  cursor: pointer;
}
#num2 span {
  color: #000;
}