title: Scroll to the top button not showing
body: <p>I am trying to display a button on the bottom right corner whenever the user scroll down to the bottom of the page. I am trying to see if there is any error in Rails or Chrome Dev Tools but nothing is showing up to identify the issue.</p>
  
  <p>This is how I have my <strong><code>application.tml.erb</code></strong> with the button on the bottom part before the body tag:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no"&gt;
    &lt;meta name="keywords" content=""&gt;
    &lt;meta name="description" content=""&gt;
  
    &lt;!-- FONTS --&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:300,300i,400,400i,700,700i|Playfair+Display:400,400i" rel="stylesheet"&gt;
  
    &lt;%= csrf_meta_tags %&gt;
  
    &lt;%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %&gt;
    &lt;%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div id="main container"&gt;
  
      &lt;%= render 'layouts/navbar' %&gt;
  
      &lt;%= yield %&gt;
  
    &lt;/div&gt;&lt;!-- MAIN CONTAINER --&gt;
  
    &lt;!-- SCROLL UP --&gt;
    &lt;a id="scroll-up" class="waves"&gt;&lt;i class="fa fa-angle-up"&gt;&lt;/i&gt;&lt;/a&gt; 
    &lt;!-- THIS IS WHERE I ADDED THE SCROLL UP BUTTON --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I also tried adding a <code>content_tag</code> but still no success:</p>
  
  <pre><code>&lt;% content_tag :a, :id =&gt; "scroll-up", :class =&gt; "waves" do %&gt;
      &lt;i class="fa fa-angle-up"&gt;&lt;/i&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p><strong><code>application.js</code></strong>:</p>
  
  <pre><code>// SHOW/HIDE SCROLL UP
      function show_hide_scroll_top() {
  
          if ($(window).scrollTop() &gt; $(window).height()/2) {
              $("#scroll-up").fadeIn(300);
          } else {
              $("#scroll-up").fadeOut(300);
          }
  
      }
  
  
      // SCROLL UP
      function scroll_up() {              
  
          $("#scroll-up").on("click", function() {
              $("html, body").animate({
                  scrollTop: 0
              }, 800);
              return false;
          });
  
      }
  
      // SHOW/HIDE SCROLL UP
      show_hide_scroll_top();
  
  
      // SCROLL UP
      scroll_up();
  </code></pre>
  
  <p>And my <strong><code>application.css.scss</code></strong>:</p>
  
  <pre><code>#scroll-up {
      position: fixed;
      z-index: 8030;
      bottom: 50px;
      right: 50px;
      display: none;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background-color: #19496e;
      color: #fff;
      font-size: 24px;
      line-height: 42px;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      -webkit-transition: all 0.25s;
      transition: all 0.25s;
  }
  
  #scroll-up:hover {
      background-color: #94ccdf;
      box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.16), 0 3px 12px 0 rgba(0, 0, 0, 0.12);
  }
  
  #scroll-up.waves .waves-ripple {
      background-color: #c6e6f1;
  }
  
  @media (max-width: 767px) {
  
      #scroll-up {
          right: 20px;
          bottom: 20px;
      }
  
  }
  </code></pre>
  
  <p>Would appreciate some help. Thanks!</p>