Is there a way to hide the circle once it's scrolled to the top? Currently, I can scroll the circle to the top but it remains visible. Upon further exploration, I found that clicking on the circle scrolls it to the top and then on a second click, it finally disappears.
html:
<div class="divOne"></div>
<div class="circleShape" id="circleShapeId">:)</div>
<div class="divTwo"></div>
js:
window.addEventListener('scroll', function(e) {
document.getElementById('circleShapeId').style.display = "block"
document.getElementById('circleShapeId').style.position = "fixed"
})
document.getElementById('circleShapeId').addEventListener('click', function(){
document.getElementById('circleShapeId').style.display = "none"
window.location = '#'
})
css:
.circleShape{
height: 50px;
background-color: red;
width: 50px;
border-radius: 30px;
text-align: center;
border: 2px solid white;
cursor: pointer;
float: left;
margin-left: 30px;
position: static;
display: none;
}
.divOne {
height: 300px;
background-color: yellow;
}
.divTwo{
height: 300px;
background-color: pink;
}