Object appears at a certain place on the page

Question

My question is this: I want/need a code for my site, which works the way of this website. In it, when the user uses the scroll mouse to scroll down a bit on the page, a little arrow (which when it is clicked, goes back to the top - the top part of the site) appears in the right corner.

I’ve already searched the Google, and I guess I didn’t know how to use the right words, because I couldn’t find any results that would suit me.

Note: The code to return upward I already have.

Answer 1

Use jquery + css. Place the arrow inside a div and apply the css so it is always floating on the right side, for example:

<div class="seta"><img src="/imagens/seta.jpg" /></div>

Your css would look like this, assuming that arrow has 30x30:

.seta {position:fixed; display:none; right:0px; top:300px; width:30px; height:30px; z-index:999;}

Now use jquery to hide or show the div when the scroll reaches a certain position. For this we will use the jquery "scroll" event:

$( window ).scroll(function() {
    nScrollPosition = $( window ).scrollTop();
    if(nScrollPosition>=100){
         $( ".seta" ).css( "display", "block" );
    }else{
         $( ".seta" ).css( "display", "none" );
    }
});

In the above example, when the scroll reaches 100px from the top, the arrow will appear, otherwise hide the arrow.