Search code examples
javascriptscrolltoponscroll

Window Vs document.documentElement best practices

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 document.documentElement.onscroll to call the function. But when I set the "To Top" div, I had to use window.scrollTo(0,0) function to go back to the top of the page because document.documentElement.scrollTo(0,0) did not work. What is the difference between window and document.documentElement? 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scroll demo</title>
  <style>
  #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%;
    }
  </style>

</head>

<body>

<div id="heading"><h1>Try scrolling the iframe.</h1></div>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>

<div onclick="top_function()" id="top">
<h3>To Top</h3>
</div>


<script>
    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 > 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 > 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);
};

Solution

  • In general, the DOM API is hard. Depending on what you are doing, jQuery has the potential to give you a lot more bang for your development buck in terms of understandability, readability, maintainability, and cross-platform compatibility.

    That being said, document.documentElement is a reference to the <HTML/> node of the document. Unless something really odd is going on (eg html { overflow: scroll; }), scrollTop for <HTML/> should always be 0 just as other nodes that are not scrolled.

    Direct page scrolling actually occurs on the window. This fiddle shows how to listen for the scroll offset changes on the window, get the current scroll offset of the window, and scroll the window to a new offset.

    For the record, if you want to make a link that scrolls to the top of the page, there is no need for JavaScript at all, just create a link to #. As long as you don't intercept the native processing of the link, the defined behavior is to scroll back to the top of the page.