title: Scroll 100vh within a div?
body: <p>I'm trying to make a button that scrolls down 100vh (one window height) on click. I have it so that 30vh of width is fixed and the scrolling portion is the 70% on the right. I'm wondering why my code doesn't do anything when I use <code>window.scrollBy</code>? </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;Content&gt; 
    &lt;Intro /&gt;
    &lt;TypewriterSpace&gt;
      &lt;Typewriter /&gt;
      &lt;Button onClick={this.handleClick}&gt;View my work&lt;/Button&gt;
    &lt;/TypewriterSpace&gt;
  &lt;/Content&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>let TypewriterSpace = styled.div`
    margin-left: 6rem;
    margin-right: 20rem;
    margin-top: -1rem;
    position: relative;
  `
  
  let Content = styled.div`
    height: 100vh;
    width: 70vw;
    display: flex;
    flex-direction: column;
    float: right;
    overflow: auto;
  `
  
  const Button = styled.button`
    font-family: "Avenir";
    height: 3em;
    width: 10em;
    color: white;
    border: 2px solid white;
    background: #1d1d20;
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    position: absolute;
    transition: 0.5s;
    margin-top: 4em;
    left: 35%;
    margin-top: 60vh;
  
    &amp;:hover{
      color: #1d1d20;
      border: 2px #1d1d20;
      background: white;
    }
  `;
  </code></pre>
  
  <p>My handeClick function: </p>
  
  <pre><code>  handleClick(e) {
      let pageHeight = window.innerHeight;
      window.scrollBy(0, pageHeight);
    }
  </code></pre>