Slide Scroll

by Ivan Ferrer

HTML

<a href="#tela1" class="btn">Tela 1</a>
<a href="#tela2" class="btn">Tela 2</a>
<a href="#tela3" class="btn"> Tela 3</a>
<div id="telass">
 <div id = "tela1" class="tela">
 <p>Tela 1</p>

 </div>
 <div id = "tela2" class="tela">
 <p>Tela 2</p>

 </div>
 <div id = "tela3" class="tela">
    <h1>Tela 3</h1>
 </div>

CSS

html, body {margin: 0; padding: 0;}

#telass{
top: 100px;
left: 0;
width:100%;
height: 80%;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;

display: inline-block;
vertical-align: middle;
position: absolute;

}

.tela{
  top: 100px;
  width: 100%;
  height: 200px;
  display: inline-block;
  vertical-align: top;
  height: 1000px;
}
#tela1{
    background-color: red;
}
#tela2{
    background-color: blue;
}
#tela3{
    background-color: yellow;
}

JavaScript

$(function(){
 $('.btn').on('click', function (event) {
      var el = $(this).attr('href');
      var tela = [];
      var larg = $(el).width();
       tela['#tela1'] = 0;
       for (var i=2; i <= $('#telass div').length; i++) {
          tela['#tela'+i] = larg;
          larg += larg;
       }
     $('#telass').animate({scrollLeft:tela[el]}, 800);
     });
});