Style element with javascript

Question

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:

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

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

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:

    var posit = window.scrollTop();
    if (posit < 900) {
        document.getElementById("gototop").style.display = 'none';
    }

Why does this styling not take effect?

The complete code I am using is:

    var posit = window.scrollTop();
    if (posit < 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);
      }

Thanks for your attention, greetings.

Akhil Sekharan · Accepted Answer · 2012-12-12 01:17:49Z

2

Try putting it into the onscroll event handler, like:

Add style to your gototop element, for example:

<div id="gototop" onclick="scrollToTop()" style="display:none;"> </div>     


window.onscroll = function(){
    if (window.scrollY < 900) {
        document.getElementById("gototop").style.display = 'none';
    else
        document.getElementById("gototop").style.display = 'block';
}

edited Dec 12, 2012 at 1:17

answered Dec 11, 2012 at 10:30

Akhil Sekharan

12.7k8 gold badges43 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Willy Over a year ago

Thanks you, I had to change your code a little bit to make it work in IE8 and in Chrome. It works now as I wanted, in FF, Chrome, IE and Opera, except for the fact that the button shows initially, until I scroll at least 1 pixel. This happens in all browsers and I have not been able to find a way of hidding the button until the page is scrolled the pixels indicated in the code.

Willy Over a year ago

Thanks again, that's a lot better, but until the document is not completely loaded the button shows. If I do document.getElementById("gototop").style.display = 'none'; instead of window.onload = function(){ document.getElementById("gototop").style.display = 'none'; } it works as I want, except for a short initial flicker of the button in Opera. I do not know if my code is correct?

Willy Over a year ago

Hello Akhil, that's perfect. I will post an answer with the complete working code. Thanks a lot, you made me very happy with your solution.

Willy · Accepted Answer · 2012-12-12 06:55:42Z

This is the complete working code for a Back-to-top button.

<style type="text/css">
#gototop{display:none;position:fixed;right:28px;bottom:10px;z-index:100;}
#gototop a{font-size:14px;font-weight:bold;display:block;padding:5px;text-decoration:none;color:#fff;background:#000;opacity:0.5;border:1px solid #aaa;}
#gototop a:hover{color: #000;text-decoration:underline;background-color:#fff;border: 2px solid #aaa;opacity:0.5;}
</style>

<script type="text/javascript" language="javascript">

// document.documentElement.scrollTop makes it work in Chrome and IE
// 400 is the point from which the button starts showing, you can change it to your needs

gototop = document.getElementById("gototop");

window.onscroll = function(){
    if (window.scrollY < 400 || document.documentElement.scrollTop < 400) {
        gototop.style.display = 'none';
}
    if (window.scrollY > 400 || document.documentElement.scrollTop > 400)
        gototop.style.display = 'block';
}

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

<div id="gototop"><a href="#header" onclick="scrollToTop();return false">Back to Top</a></div>

Collectives™ on Stack Overflow

Style element with javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related