title: Smooth scroll on button click: Not working for me but works great in the Code Snippet
body: <p>I'm a beginner in JavaScript and jQuery. My css and JavaScript codes are external to html file. There are already answers for this question and i tried, tried all the codes but scrolling does not work. I don't know what i missed. jQuery is installed (Even CDN).
  Well, this code works in the snippet so probably something wrong with javaScript or JQuery. Still i don't know what is my mistake. Please help.
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#btn1").click(function() {
      $('html,body').animate({
          scrollTop: $("#fir").offset().top},
          'slow');
  });
  
  $("#btn2").click(function() {
      $('html,body').animate({
          scrollTop: $("#sec").offset().top},
          'slow');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.button1{ position:absolute; top:130px; left:150px; font-size: 10px; cursor:pointer; color:#000000;}
  .main{ width: 100%; height:500px; background:black; }
  .first{ width: 100%; height: 1000px; background: green; }
  .second{ width: 100%; height: 1000px; background: blue; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt; 
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt; 
      &lt;/head&gt;
  
      &lt;body&gt;
      &lt;script src="http://code.jquery.com/jquery-2.2.1.min.js"&gt;&lt;/script&gt; &lt;!-- JQuery CDN --&gt;
      &lt;script&gt;window.jQuery || document.write('&lt;script src="JQuery.js"&gt;&lt;\/script&gt;');&lt;/script&gt;  &lt;!-- JQuery library --&gt;
      &lt;script src="js/script.js" type="text/javascript"&gt;&lt;/script&gt; &lt;!-- my javascript --&gt;
  
      &lt;div class="main"&gt;
      &lt;button id="btn1" type="button" class="button1"&gt;Sign Up&lt;/button&gt;
      &lt;button id="btn2" type="button" class="button1" style=left:250px&gt;Sign In&lt;/button&gt;&lt;/div&gt;
      &lt;div id="fir" class="first"&gt;&lt;/div&gt;
      &lt;div id="sec" class="second"&gt;&lt;/div&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>