scrollTo

by trkli

HTML

<div class="container">
  <div class="section section-one">
    <div class="el el-a">1</div>
    <div class="el el-b">2</div>
    <div class="el el-c">3</div>
    <div class="el el-d">4</div>
    <div class="el el-e">5</div>
    <div class="el el-f">6</div>
  </div>
  <div class="section section-two">
    <div class="el el-a">1</div>
    <div class="el el-b">2</div>
    <div class="el el-c">3</div>
    <div class="el el-d">4</div>
    <div class="el el-e">5</div>
    <div class="el el-f">6</div>
  </div>
  <div class="section section-three">
    <div class="el el-a">1</div>
    <div class="el el-b">2</div>
    <div class="el el-c">3</div>
    <div class="el el-d">4</div>
    <div class="el el-e">5</div>
    <div class="el el-f">6</div>
  </div>
</div>

CSS

* {margin: 0; padding: 0; color: white;}

body, html {
  height: 100%;
  overflow: hidden;
}

.container {
  display: flex;
}

.section-one {
  position: absolute;
  top: 0; left: 0;
  width: auto;
  height: 100%;
  background: pink;
  overflow-y: auto;
}

.section-one .el {
  display: block;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: red;  
  cursor: pointer;
}

.section-two {
  position: absolute;
  top: 0; left: 120px;
  width: auto;
  height: 100%;
  background: pink;
  overflow-y: auto;
}

.section-two .el {
  width: 100px;
  height: 200px;
  margin: 10px;
  background: blue;
  cursor: pointer;
}

.section-three {
  position: absolute;
  top: 0; left: 240px;
  width: auto;
  height: 100%;
  background: pink;
  overflow-y: auto;
}

.section-three .el {
  width: 100px;
  height: 180px;
  margin: 10px;
  background: green;
  cursor: pointer;
}

JavaScript

$(".section > div").click(function(event) {
	event.preventDefault();
  
  var index = $(this).index();
	
  $(".section").each(function(i) {
    var project = $(this).find("div").eq(index);
    var scrollTop = $(this).scrollTop();
    var position = project.offset().top + scrollTop;
   
		$(this).animate({
			scrollTop: position
		}, 500, 'swing' );
  });
});