title: Window Vs document.documentElement best practices
body: <p>I have a simple page I want to make the top div to be fixed when I scrolled down and a "To Top" div to go back to the top of the page.  I used document.documentElement.scrollTop to get my current position of scrolling from top and <code>document.documentElement.onscroll</code> to call the function.  But when I set the "To Top" div, I had to use <code>window.scrollTo(0,0)</code> function to go back to the top of the page because <code>document.documentElement.scrollTo(0,0)</code> did not work.  What is the difference between <code>window</code> and <code>document.documentElement</code>? </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;scroll demo&lt;/title&gt;
    &lt;style&gt;
    #heading {
      color: white;
      background:steelblue;
      position:absolute;
      left:10px;
      top:-20px;
      padding:5px;
    }
    p {
      color: green;
    }
    span {
      color: red;
      display: none;
    }
  
    #top{
      padding:5px;
      border:dotted 2px steelblue;
      box-shadow: -3px -3px 3px;
      background:steelblue;
      width:75px;
      position:fixed;
      right:0;
      bottom:0;
      display:none;
      opacity:0.9;
      border-top-right-radius:100%;
      border-top-left-radius:100%;
      }
    &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="heading"&gt;&lt;h1&gt;Try scrolling the iframe.&lt;/h1&gt;&lt;/div&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
  
  &lt;div onclick="top_function()" id="top"&gt;
  &lt;h3&gt;To Top&lt;/h3&gt;
  &lt;/div&gt;
  
  
  &lt;script&gt;
      document.documentElement.onscroll = function(){ //a function is call     when scroll using .onscroll 
  var x = document.documentElement.scrollTop;  //x is the current scroll position of document
  if(x &gt; 0){  //set greater than zero to avoid the annoytingblinking effect
  document.getElementById("heading").style.position="fixed";
  document.getElementById("heading").style.top="-20px";
  document.getElementById("heading").style.left="10px";
  }
  else{
  document.getElementById("heading").style.position="absolute";
  document.getElementById("heading").style.top="-20px";
  document.getElementById("heading").style.left="10px";
  };
  
  if(x &gt; 100){
  document.getElementById("top").style.display="inline-block";
  
  }
  else{
  document.getElementById("top").style.display="none";
  };
  }; //ends function onscroll
  
  
  function top_function(){
  window.scrollTo(0,0);
  };
  </code></pre>
  
  <p></p>
  
  <p>
  </p>