title: Scroll down with JavaScript or JQuery when click on button
body: <p>I've been trying to fix it by myself looking for it here, and I found a lot of answers, but I just can't figure it out how to implement that code into my page.</p>
  
  <p>I know that I might have things that shouldn't be like that, but im learning and right know what I want to solve is that.</p>
  
  <p>The only thing I wanna do is to scroll down to the class ".separador" when I click the button.</p>
  
  <p>this is the HTML, CSS and JQuery code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".btn").click(function() {
      $('html, body, article').animate({
          scrollTop: $(".separador").offset().top
      }, 2000);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*, html{
   margin: 0 auto;
   font-family: 'Josefin Slab', serif;
  }
  
  body{
   background-image: url("fotos/principal.png");
   background-repeat: no-repeat;
  
  }
  
  header{
   width: 100%;
   height: 7%;
   padding-top: 15px;
   padding-bottom: 15px;
   background: -moz-linear-gradient(-45deg, rgba(112,112,112,0.65) 0%, rgba(112,112,112,0) 52%); /* FF3.6-15 */
   background: -webkit-linear-gradient(-45deg, rgba(112,112,112,0.65) 0%,rgba(112,112,112,0) 52%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(135deg, rgba(112,112,112,0.65) 0%,rgba(112,112,112,0) 52%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6707070', endColorstr='#00707070',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
   copy
   float: left;
   text-align: left;
  }
  
  ul li{
   display: inline;
   padding-right: 15px;
   font-weight: bold;
  
  }
  
  ul li a:link{
   color: black;
   text-decoration: none;
  
  }
  
  ul li a:visited{
   color: black;
   text-decoration: none;
  }
  
  ul li a:hover{
   color:white;
   text-decoration: none;
  }
  
  ul li a:active{
   color: white;
  }
  
  
  
  article{
   float: left;
   position: relative; left: 20%; top: 200px;
  }
  
  #MBOLD{
    font-weight: bold;
    font-size: 60px;
  }
  
  #MTHIN{
   font-size:45px;
  }
  
  article div button.btn {
    background: #808080;
    background-image: -webkit-linear-gradient(top, #808080, #4a4a4a);
    background-image: -moz-linear-gradient(top, #808080, #4a4a4a);
    background-image: -ms-linear-gradient(top, #808080, #4a4a4a);
    background-image: -o-linear-gradient(top, #808080, #4a4a4a);
    background-image: linear-gradient(to bottom, #808080, #4a4a4a);
    -webkit-border-radius: 10;
    -moz-border-radius: 10;
    border-radius: 10px;
    text-shadow: 1px 1px 3px #666666;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    margin-top: 45px;
    margin-left: 100px;
  }
  
  article div button.btn:hover {
    background: #666666;
    background-image: -webkit-linear-gradient(top, #666666, #000000);
    background-image: -moz-linear-gradient(top, #666666, #000000);
    background-image: -ms-linear-gradient(top, #666666, #000000);
    background-image: -o-linear-gradient(top, #666666, #000000);
    background-image: linear-gradient(to bottom, #666666, #000000);
    text-decoration: none;
  }
  
  article div.separador{
   width: 100%;
      height: 1000px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
   &lt;title&gt;VR EXPERIENCE&lt;/title&gt;
   &lt;meta charset="utf-8"/&gt;
   &lt;link rel="stylesheet" type="text/css" href="stylesheet.css"/&gt;
   &lt;script src="jQuery.js"&gt;&lt;/script&gt;
   &lt;style&gt;
    @import url('https://fonts.googleapis.com/css?family=Josefin+Slab');
   &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;header&gt;
    &lt;ul&gt;
     &lt;li&gt;&lt;a href="index.xhtml"&gt;Inicio&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="Mercado.xhtml"&gt;Mercado&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="Estadisticas.xhtml"&gt;Estadísticas&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="Conócenos.xhtml"&gt;Conócenos&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/header&gt;
   &lt;nav&gt;&lt;/nav&gt;
   &lt;article&gt;
    &lt;div id="MBOLD"&gt;VR Experience&lt;/div&gt;
    &lt;div id="MTHIN"&gt;Supera los límites&lt;/div&gt;
  
    &lt;div&gt;
     &lt;button type="button" onclick="smoothScroll(document.getElementById('second'))" class="btn"&gt;Click Me!&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="separador"&gt;
     
    &lt;/div&gt;
   &lt;/article&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>