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).


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


    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);
    -webkit-filter: opacity(1);
    filter: opacity(1);


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>

Post Status

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


Leave an answer

Quote of the day: live life