Display List Items as Scrolling Content

Display list items in an unordered list as scrolling content

by Tsekwi Simoyi

HTML

<ul id="wrap">
  <li>
    <div>
      <h2>Item 1</h2>
      <div id="scroll-down">
        <a href="javascript:void(0)">Scroll Down</a>
      </div>
    </div>
  </li>
  <li id="scrollto">
    <div>
      <h2>Item 2</h2>
    </div>
  </li>
  <li>
    <div>
      <h2>Item 3</h2>
    </div>
  </li>
</ul>

SCSS

$width: 100%;
$height: 100%;

html, body {
  width: $width;
  height: $height;
  margin: 0;
  padding: 0;
}
#wrap {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
  width: $width;
  height: $height;
  li {
    display: block;
    overflow: hidden;
    position: relative;
    width: $width;
  }
  li:first-child {
    background-color: green;
    height: 100vh;
  }
  li:not(:first-child) {
    min-height: 400px;
  }
  li:nth-child(2) {
    background-color: lightgreen;
  }
  li:last-of-type {
    background-color: lightblue;
  }
}
h2 {
  margin-top: 0;
}
#scroll-down {
  position: absolute;
  bottom: 15px;
  width: $width;
}
#scroll-down a {
  display: block;
  text-align: center;
  color: #ffffff;
}

JavaScript

$(document).ready(function(){

$("#scroll-down").click(function() {
  $('html, body').animate({
    scrollTop: $("#scrollto").offset().top
  }, 1000);
});

});