change css display when user scrolls down. Without jQuery

Question

Actually i want to create a "Scroll to the top" button without jQuery.
The go to the top function is already working.
Now I need to automate the display: none to display: block when the user scrolls down the page. And the other way when it gets back to the top.

<a href="#ancor-top" id="GoTop">Top</a>

#GoTop {
    display: none;
    position: fixed; 
    bottom: 20px; 
    right: 30px; 
    z-index: 99;
    border: none; 
    outline: none;
    background-color: red; 
    color: white; 
    cursor: pointer; 
    padding: 15px; 
    border-radius: 10px; 
}

Shadow Fiend · Accepted Answer · 2017-10-09 06:21:17Z

2

Try this

var goTop = document.getElementById('GoTop');
window.onscroll = function(ev) {
  if (this.pageYOffset > 100) {
    goTop.style.display = 'block';
  } else {
    goTop.style.display = 'none';
  }
};

div {
  height: 200vh;
  width: 100%;
}

#GoTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}

<a href="#ancor-top" id="GoTop">Top</a>
<div>
</div>

answered Oct 9, 2017 at 6:21

Shadow Fiend

1,8291 gold badge11 silver badges14 bronze badges

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

5 Comments

Kannan K Over a year ago

Without using jquery you can acheive this by using Bootstrap section and Scrollspy.

Shadow Fiend Over a year ago

@KarenBezas did you put the code in a separate file? if so check the path. If its the same path did you put it at the top of the page? then wrap the javascript with the window.onload function or just simply put the code before the end of body tag..

Maverickk Over a year ago

It was in the beginning of the body tag. I've moved it to the before the end of the body tag, and now it worked ;) thanks!

Shadow Fiend Over a year ago

@KarenBezas I'm glad I was able to help :)

Kameron Jan 29 at 13:43

pageYOffset is deprecated

Collectives™ on Stack Overflow

change css display when user scrolls down. Without jQuery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related