title: tips on how to make a fullscreen div scroll on ruby rails?
body: <p>hi I'm really new to programming and stuff and just started learning ruby rails.</p>
  
  <p>I know there are a lot of QnA about div scrolling using jquery- I just can't seem to apply it on my code. </p>
  
  <p>(you can see the code here)
  <a href="https://ide.c9.io/grimandme/gifhub_0915" rel="nofollow">https://ide.c9.io/grimandme/gifhub_0915</a></p>
  
  <p>I think I'm making a basic mistake? But i have no idea. 
  Could someone please help?</p>
  
  <p>///
  Additionally
  I have already tried 
  <a href="http://alvarotrigo.com/blog/category/jquery/" rel="nofollow">http://alvarotrigo.com/blog/category/jquery/</a></p>
  
  <p>but it's a bit out of my reach because I have no idea 
  how to translate that to ruby rails..?</p>
  
  <p>Any tip would help- I'm really new to all this so sorry if the question is too easy</p>
  
  <hr>
  
  <p>I realised that my question is too vague/</p>
  
  <p>the jquery code i was using is</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
   $(document).ready(function() {
  
   $('.tile a').click(function(event) {
  var id = $(this).attr("href");
  
   $('html, body').animate({scrollTop:target}, 10000);
   event.preventDefault();
   });
   });
   &lt;/script&gt;
  </code></pre>
  
  <p>css code</p>
  
  <pre><code>body,html {
  text-align: center;
  width: 100%;
  height: 100%;
  }
  
  
  .tile {
  height: 100%;
  width: 100%;
  position: relative;
  background-color: #eaeaea;
  }
  
  .tile div {
  padding-top: 70px;
  }
  
  #up {
   background-color: #222;
   }
  </code></pre>
  
  <p>and my .erb code</p>
  
  <pre><code>&lt;%## scroll up page ##%&gt;
  &lt;div class='tile' id='up'&gt;
  &lt;%## search bar ##%&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-lg-3"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-lg-6"&gt;
          &lt;div class="input-group"&gt;
            &lt;input type="text" class="form-control" placeholder="Search for..."&gt;
            &lt;span class="input-group-btn"&gt;
              &lt;button class="btn btn-default" type="button"&gt;Go!&lt;/button&gt;
            &lt;/span&gt;
          &lt;/div&gt;&lt;!-- /input-group --&gt;
        &lt;/div&gt;&lt;!-- /.col-lg-6 --&gt;
  &lt;/div&gt;&lt;!-- /.row --&gt;
  
  
  &lt;div class=but_down style="width:100px; height:100px; background-color:red;"&gt; 
  &lt;a href="#down"&gt; down &lt;/a&gt; 
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;%## scroll down page ##%&gt;
   &lt;div class='tile' id='down'&gt;
   &lt;h1&gt; yeah &lt;/h1&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>basically this is how i want my code to work -
  i want a fullscreen div scrolling/
  and when i click 'down' i want it to scroll down to my next fullscreen div</p>
  
  <p>My code works - but it doesn't 'scroll' down ? and I'm not sure why.</p>
  
  <p>Could anyone help?</p>