Style element with javascript
<p>I am trying to make a gototop button with javascript (not jQuery).
I want this button to have a delay effect which I achieve by:</p>

<pre><code>    var timeOut;
    function scrollToTop() {
      if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
        window.scrollBy(0,-50);
        timeOut=setTimeout('scrollToTop()',10);
       }
      else clearTimeout(timeOut);
    }
</code></pre>

<p>The html is a simple:
<code>&lt;div id="gototop"&gt;&lt;a href="#header" onclick="scrollToTop();return false"&gt;Back to top&lt;/a&gt;&lt;/div&gt;</code></p>

<p>I am not able to make to button show/hide depending on scroll height. As far as I have been able to find out, the following should hide the button from view until the page has been scrolled down 600px, but this does not work:</p>

<pre><code>    var posit = window.scrollTop();
    if (posit &lt; 900) {
        document.getElementById("gototop").style.display = 'none';
    }
</code></pre>

<p>Why does this styling not take effect?</p>

<p>The complete code I am using is:</p>

<pre><code>    var posit = window.scrollTop();
    if (posit &lt; 900) {
        document.getElementById("gototop").style.display = 'none';
    }
    var timeOut;
    function scrollToTop() {
      if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
        window.scrollBy(0,-50);
        timeOut=setTimeout('scrollToTop()',10);
       }
       else clearTimeout(timeOut);
      }
</code></pre>

<p>Thanks for your attention, greetings.</p>
