Making a conditionally visible page-up button I wanted to make a button that goes to the top of the page but only appears when you're not at the top. There are probably libraries that already do this, but I wanted to make it myself and after some tinkering the following is what I came up with.

There is an occasional annoyance from quickly scrolling up &amp; down with the mouse-wheel which causes jitters/unwanted permanence of the button @ top, but otherwise it works.

setInterval is throttled in consideration for performance. I really get the feeling this could be improved, so I wondered if there is a more idiomatic/better way. What do you think?



var scrollVisible = false;
var userScrolled = false;

window.addEventListener('load', init, false);

function init() {
 window.addEventListener('scroll', function() {
  userScrolled = true;
 }, false);
 
 setInterval(function() {
     if(userScrolled) {
      if (window.pageYOffset == 0 &amp;&amp; scrollVisible) {
       document.getElementById("scrollbutton").style.visibility = 'hidden';
       scrollVisible = false;
      } else if (!scrollVisible) {
       document.getElementById("scrollbutton").style.visibility = 'visible';
       scrollVisible = true;
      }
         userScrolled = false;
     }
 }, 100);
}

function scrollUp() {
 scrollTo(0, 0);
}
body {
 background-color: #272822;
 color: #F3F3F3;
}

#scrollbutton {
 background-color: #666664;
 border-radius: 100%;
 position: fixed;
 visibility: hidden;
 font-size: 1.5em;
    bottom: 0;
    right: 0;
}
#scrollbutton:hover {
 color: #A6E22E;
}
&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;link rel="stylesheet" type="text/css" href="test.css"/&gt;
 &lt;script src="test.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
&lt;input type="button" value="&amp;#8679" id="scrollbutton" onclick="scrollUp();"/&gt;
 &lt;body&gt;
  &lt;p&gt;
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
  &lt;/p&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;   
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
        &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;   
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;p&gt;
 Contrary to popular belief, Lorem Ipsum is not simply random text.
    It has roots in a piece of classical Latin literature.
  &lt;/p&gt;
 &lt;/body&gt;
&lt;html&gt;
I doubt that you need the throttling.  Modern browser make a lot of decisions in response to events; this code is rather insignificant.

If anything, having a continuously ticking timer is counterproductive, especially on mobile devices.  I'd rather have a flurry of activity during the brief periods when scrolling is happening, and no activity at all when idle.

I would recommend toggling the visibility of the button more indirectly, using CSS.  Add or remove an scrolled-down class on the body element depending on whether the document is scrolled down.  Let the cascading rules take care of the rest.



function noteScrollPosition() {
    if ((window.pageYOffset == 0) != (document.body.className.indexOf('scrolled-down') &lt; 0)) {
        if (window.pageYOffset == 0) {
            document.body.className = document.body.className.replace(/ *scrolled-down/, '');
        } else {
            document.body.className += 'scrolled-down';
        }
    }
}
window.addEventListener('load', noteScrollPosition, false);
window.addEventListener('scroll', noteScrollPosition, false);

function scrollUp() {
    scrollTo(0, 0);
}
body {
 background-color: #272822;
 color: #F3F3F3;
}

#scrollbutton {
 background-color: #666664;
 border-radius: 100%;
 position: fixed;
 font-size: 1.5em;
 bottom: 0;
 right: 0;
 visibility: hidden;
}
body.scrolled-down #scrollbutton {
 visibility: visible;
}
#scrollbutton:hover {
 color: #A6E22E;
}
&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;link rel="stylesheet" type="text/css" href="test.css"/&gt;
 &lt;script src="test.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
&lt;input type="button" value="&amp;#8679" id="scrollbutton" onclick="scrollUp();"/&gt;
 &lt;body&gt;
  &lt;p&gt;
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
  &lt;/p&gt;
  &lt;p style="margin-top: 100em;"&gt;
 Contrary to popular belief, Lorem Ipsum is not simply random text.
    It has roots in a piece of classical Latin literature.
  &lt;/p&gt;
 &lt;/body&gt;
&lt;html&gt;