title: Scroll to top JavaScript in HTML Website
body: <p>I am trying to implement the scroll to top feature in my website: www.arrow-tvseries.com.</p>
  
  <p>The "button" is seen on the website however it does not work properly, because when clicked its not scrolling to the top of the page. More over I would like that the "Scroll to top button" is visible when scrolled down, say half the page.</p>
  
  <p>Here is the javascript code:</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"         type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(function() {
  $(window).scroll(function() {
      if($(this).scrollTop() != 200) {
          $('#backtotop').fadeIn();
      } else {
          $('#backtotop').fadeOut();
      }
  });
  
  $('#backtotop').click(function() {
      $('body,html').animate({scrollTop:0},800);
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML Code (Head Tag):</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"     "http://www.w3.org/TR/html4/frameset.dtd"&gt;
  
  &lt;html xmlns:fb="http://www.facebook.com/2008/fbml"&gt;
  &lt;head&gt;
      &lt;title&gt;Arrow-TvSeries - Home&lt;/title&gt;
  
          &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  
      &lt;!--back to top links--&gt;
          &lt;link rel="stylesheet" type="text/css" href="back_to_top.css"&gt;
          &lt;script src="/scripts/back_to_top.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;!--end of back to top links--&gt;
  
      &lt;meta property="fb:admins" content="{793705343}"/&gt;
      &lt;!--Google Analytics--&gt;
      &lt;script type="text/javascript"&gt;
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  
        ga('create', 'UA-40124321-1', 'arrow-tvseries.com');
        ga('send', 'pageview');
      &lt;/script&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
      &lt;meta name="description" content="Arrow Tv Show"&gt;
      &lt;meta name="keywords" content="arrow, tv show, amel, stephen amell, katie cassidy, oliver, oliver queen, queen"&gt;
      &lt;meta name="author" content="Ståle Refsnes"&gt;
      &lt;meta charset="UTF-8"&gt;
  
      &lt;!--IPAD setting--&gt;
      &lt;meta name="viewport" content="width = 730, initial-scale=0.70, minimum-scale = 0.5,  maximum-scale = 1.25"/&gt;
  &lt;/head&gt;     
  </code></pre>
  
  <p>CSS Code:</p>
  
  <pre><code>#backtotop {
  cursor : pointer;
  /*display : none;*/
  margin : 0px 0px 0px 370px;
  position : fixed;
  bottom : 10px;
  font-size : 90%;
  padding : 10px;
  width : 100px;
  text-align : center;
  background-color : #000;
  border-radius : 8px;
  -webkit-border-radius : 8px;
  -moz-border-radius : 8px;
  filter: alpha(opacity=60);
  -khtml-opacity : 0.6;
  -moz-opacity : 0.6;
  opacity : 0.6;
  color : #FFF;
  font-size : 14px;
  z-index : 10000;
  font-family: arial;
  }
  
  #backtotop:hover {
  filter : alpha(opacity=90);
  -khtml-opacity : 0.9;
  -moz-opacity : 0.9;
  opacity : 0.9;
  }
  </code></pre>
  
  <p>Please feel free and let me know if you require further code or information.</p>
  
  <p>Thanks</p>