My question is this: I want / need a code for my site, which works in the way of this site . In it, when the user uses the scroll of the mouse to descend a little on the page, a little bit (which when clicked, goes back to the top ) appears in the right corner.
I've already searched Google , and I do not think I could use the correct keywords, since I did not find any results that would suit me.
Note: The code to go back up I already have.
Use jquery + css. Place the arrow inside a div and apply the css so that 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 the arrow is 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 "scroll" event of jquery:
$( window ).scroll(function() {
nScrollPosition = $( window ).scrollTop();
if(nScrollPosition>=100){
$( ".seta" ).css( "display", "block" );
}else{
$( ".seta" ).css( "display", "none" );
}
});
In the example above, when the scroll reaches 100px from the top, the arrow will appear, otherwise it hides the arrow.