Home Ask Login Register

Developers Planet

Your answer is one click away!

Melody Hajian February 2016

making a go up button

I have a simple go-up anchor in my website and it's position is fixed. i need to make it disappear when it goes to the top.what javascript code should i add? better be simple and in javascript (not jQuery).

HTML:

<a id="go-up" href="#top"></a>

CSS:

a#go-up{
    position: fixed;
    border: 5px solid gray;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    top: 400px;
    left: 50px;
    background-image: url(../pic/up.jpg);
    background-position: center;
    z-index: 100;
    -webkit-filter: opacity(.4);
    filter: opacity(.4);
}
a#go-up:hover{
    -webkit-filter: opacity(1);
    filter: opacity(1);
}

Answers


epascarello February 2016

Add a listener to the window scrolling and check the position and toggle the display.

var btn = document.getElementById("go-up");
window.addEventListener("scroll", function () {
    btn.classList.toggle("show", window.scrollY > 100);
});
div { height:100px; }
#go-up { position : fixed; top : 60px; right:60px; display:none }
#go-up.show { display : block; }
<a id="go-up" href="#top">UP</a>
<a id="top"></a>
<div>X</div>
<div>X</div>
<div>X</div>
<div>X</div>
<div>X</div>

Post Status

Asked in February 2016
Viewed 1,291 times
Voted 9
Answered 1 times

Search




Leave an answer


Quote of the day: live life