title: horizontal scroll inside container
body: <p>I'm pretty new to javascript and I'm trying to create a horizontal scrolling div :-</p>
  
  <p><a href="https://jsfiddle.net/joso157/bpxkdb86/1/" rel="noreferrer">JSfiddle</a></p>
  
  <p>As you can see the menu links go to each colour but I would like to put this inside a container  which is 250x250px so only 1 colour is visible, then you click on whichever link and it scrolls to that colour.</p>
  
  <p>Hope someone can help me with a few pointers.</p>
  
  <p>Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function ($) {
  
      $(".scroll").click(function (event) {
          event.preventDefault();
          $('html,body').animate({
              scrollLeft: $(this.hash).offset().left
          }, 200);
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
      white-space: nowrap;
  }
  .child-element {
      min-width: 250px;
      display: inline-block;
      height: 250px;
  }
  .child1 {
      background-color: purple;
  }
  .child2 {
      background-color: orange;
  }
  .child3 {
      background-color: black;
  }
  .child4 {
      background-color: green;
  }
  .child5 {
      background-color: blue;
  }
  .child6 {
      background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;a href="#purple" class="scroll"&gt;PURPLE&lt;/a&gt; 
  &lt;a href="#orange" class="scroll"&gt;ORANGE&lt;/a&gt; 
  &lt;a href="#black" class="scroll"&gt;BLACK&lt;/a&gt; 
  &lt;a href="#green" class="scroll"&gt;GREEN&lt;/a&gt; 
  &lt;a href="#blue" class="scroll"&gt;BLUE&lt;/a&gt; 
  &lt;a href="#red" class="scroll"&gt;RED&lt;/a&gt;
  
  &lt;div class="container"&gt;
      &lt;div id="purple" class="child-element child1"&gt;&lt;/div&gt;
      &lt;div id="orange" class="child-element child2"&gt;&lt;/div&gt;
      &lt;div id="black" class="child-element child3"&gt;&lt;/div&gt;
      &lt;div id="green" class="child-element child4"&gt;&lt;/div&gt;
      &lt;div id="blue" class="child-element child5"&gt;&lt;/div&gt;
      &lt;div id="red" class="child-element child6"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>